@searchcraft/vue-sdk 0.9.7 → 0.10.1
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/dist/index.d.ts +1157 -1812
- package/dist/index.es.js +2977 -3462
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +7 -17
- package/dist/index.umd.js.map +1 -1
- package/dist/themes/hologram.css +1 -0
- package/dist/themes/hologram.css.map +1 -0
- package/package.json +10 -8
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,146 @@
|
|
|
1
1
|
// Generated by dts-bundle-generator v9.5.1
|
|
2
2
|
|
|
3
|
+
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
|
|
4
|
+
|
|
5
|
+
declare enum LogLevel {
|
|
6
|
+
DEBUG = 0,
|
|
7
|
+
INFO = 1,
|
|
8
|
+
WARN = 2,
|
|
9
|
+
ERROR = 3
|
|
10
|
+
}
|
|
11
|
+
export interface SDKDebuggerOptions {
|
|
12
|
+
logLevel: LogLevel;
|
|
13
|
+
logFormatter?: (level: LogLevel, message: string) => string;
|
|
14
|
+
}
|
|
15
|
+
declare class Logger {
|
|
16
|
+
private logLevel;
|
|
17
|
+
private logFormatter;
|
|
18
|
+
constructor(options: SDKDebuggerOptions);
|
|
19
|
+
private defaultFormatter;
|
|
20
|
+
debug(message: string): void;
|
|
21
|
+
info(message: string): void;
|
|
22
|
+
warn(message: string): void;
|
|
23
|
+
error(message: string): void;
|
|
24
|
+
log(level: LogLevel, message: string): void;
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* A data type representing an index field value, along with properties
|
|
28
|
+
* describing how to format and display the index field value.
|
|
29
|
+
*/
|
|
30
|
+
export type SearchResultFieldName = {
|
|
31
|
+
/**
|
|
32
|
+
* The index field name.
|
|
33
|
+
*/
|
|
34
|
+
fieldName: string;
|
|
35
|
+
/**
|
|
36
|
+
* The data type to treat this index field as.
|
|
37
|
+
*/
|
|
38
|
+
dataType: "text" | "date" | "number";
|
|
39
|
+
/**
|
|
40
|
+
* The locale to use when formatting dataType: `number`
|
|
41
|
+
*/
|
|
42
|
+
numberFormatLocale?: string;
|
|
43
|
+
/**
|
|
44
|
+
* If it's a number, the number format to apply.
|
|
45
|
+
* reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
|
|
46
|
+
*/
|
|
47
|
+
numberFormatOptions?: Intl.NumberFormatOptions;
|
|
48
|
+
/**
|
|
49
|
+
* A scale factor to apply to a `number` value.
|
|
50
|
+
*/
|
|
51
|
+
numberScale?: number;
|
|
52
|
+
/**
|
|
53
|
+
* TODO: Implement DateFormatOptions, for date formatting
|
|
54
|
+
*/
|
|
55
|
+
dateFormatOptions?: unknown;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* A data type representing the mapping of index fields, for the purpose of rendering them
|
|
59
|
+
* in search result item.
|
|
60
|
+
*/
|
|
61
|
+
export type SearchResultMapping = {
|
|
62
|
+
/**
|
|
63
|
+
* The fields to map to.
|
|
64
|
+
*/
|
|
65
|
+
fieldNames: SearchResultFieldName[];
|
|
66
|
+
/**
|
|
67
|
+
* The delimiter used to join them.
|
|
68
|
+
*/
|
|
69
|
+
delimiter?: string;
|
|
70
|
+
};
|
|
71
|
+
export type PopoverResultMappings = {
|
|
72
|
+
title?: SearchResultMapping;
|
|
73
|
+
subtitle?: SearchResultMapping;
|
|
74
|
+
imageSource?: SearchResultMapping;
|
|
75
|
+
imageAlt?: SearchResultMapping;
|
|
76
|
+
href?: SearchResultMapping;
|
|
77
|
+
};
|
|
78
|
+
export interface FilterItem {
|
|
79
|
+
type: "facets" | "dateRange" | "numericRange" | "exactMatchToggle" | "mostRecentToggle";
|
|
80
|
+
label: string;
|
|
81
|
+
options: object | null;
|
|
82
|
+
}
|
|
83
|
+
export interface FacetsFilterItem extends FilterItem {
|
|
84
|
+
fieldName: string;
|
|
85
|
+
type: "facets";
|
|
86
|
+
options: {
|
|
87
|
+
showSublevel: boolean;
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
export interface NumericFilterItem extends FilterItem {
|
|
91
|
+
fieldName: string;
|
|
92
|
+
type: "numericRange";
|
|
93
|
+
options: {
|
|
94
|
+
min: number;
|
|
95
|
+
max: number;
|
|
96
|
+
granularity: number;
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
export interface DateRangeFilterItem extends FilterItem {
|
|
100
|
+
fieldName: string;
|
|
101
|
+
type: "dateRange";
|
|
102
|
+
options: {
|
|
103
|
+
minDate: Date;
|
|
104
|
+
maxDate: Date;
|
|
105
|
+
granularity: "year" | "month" | "day" | "hour";
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
export interface ExactMatchToggleFilterItem extends FilterItem {
|
|
109
|
+
type: "exactMatchToggle";
|
|
110
|
+
options: {
|
|
111
|
+
subLabel?: string;
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
export interface MostRecentToggleFilterItem extends FilterItem {
|
|
115
|
+
type: "mostRecentToggle";
|
|
116
|
+
options: {
|
|
117
|
+
subLabel?: string;
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
export type TemplateHtml = (strings: TemplateStringsArray, ...values: (string | number | undefined)[]) => string;
|
|
121
|
+
export type SearchResultTemplate<T> = (data: T, index: number, utils: {
|
|
122
|
+
html: TemplateHtml;
|
|
123
|
+
}) => string;
|
|
124
|
+
export type SearchResultTemplateData = any;
|
|
125
|
+
export type ResultsInfoTemplate = (data: {
|
|
126
|
+
range: [
|
|
127
|
+
number,
|
|
128
|
+
number
|
|
129
|
+
];
|
|
130
|
+
count: number;
|
|
131
|
+
responseTime: string;
|
|
132
|
+
}, utils: {
|
|
133
|
+
html: TemplateHtml;
|
|
134
|
+
}) => string;
|
|
135
|
+
export type CustomAdTemplate = (data: {
|
|
136
|
+
adContainerId: string;
|
|
137
|
+
searchTerm: string;
|
|
138
|
+
}, utils: {
|
|
139
|
+
html: TemplateHtml;
|
|
140
|
+
}) => string;
|
|
141
|
+
export type PopoverButtonTemplate = (data: boolean, utils: {
|
|
142
|
+
html: TemplateHtml;
|
|
143
|
+
}) => string;
|
|
3
144
|
/**
|
|
4
145
|
* The SearchcraftConfig object is used to initialize Searchcraft in your application.
|
|
5
146
|
*/
|
|
@@ -67,7 +208,7 @@ export interface SearchcraftConfig {
|
|
|
67
208
|
/**
|
|
68
209
|
* A callback function responsible for rendering the custom ad containers.
|
|
69
210
|
*/
|
|
70
|
-
customAdTemplate?:
|
|
211
|
+
customAdTemplate?: CustomAdTemplate;
|
|
71
212
|
/**
|
|
72
213
|
* The placement id to use for Nativo ads.
|
|
73
214
|
*/
|
|
@@ -105,11 +246,6 @@ export interface SearchcraftSDKInfo {
|
|
|
105
246
|
sdkName: string;
|
|
106
247
|
sdkVersion: string;
|
|
107
248
|
}
|
|
108
|
-
export interface CustomAdTemplateRenderData {
|
|
109
|
-
adContainerId: string;
|
|
110
|
-
searchTerm: string;
|
|
111
|
-
}
|
|
112
|
-
export type CustomAdTemplateRenderFunction = (data: CustomAdTemplateRenderData) => string;
|
|
113
249
|
export interface AdClientResponseItem {
|
|
114
250
|
id: string;
|
|
115
251
|
adSource: SearchcraftAdSource;
|
|
@@ -132,7 +268,7 @@ export interface FacetChild {
|
|
|
132
268
|
/**
|
|
133
269
|
* Types of measure requests that can be sent to the /measure/event endpoint.
|
|
134
270
|
*/
|
|
135
|
-
export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "document_clicked";
|
|
271
|
+
export type MeasureEventName = "sdk_initialized" | "search_requested" | "search_response_received" | "search_completed" | "document_clicked";
|
|
136
272
|
/**
|
|
137
273
|
* Properties attached to a measure request.
|
|
138
274
|
*/
|
|
@@ -304,109 +440,6 @@ export type UnsubscribeFunction = () => void;
|
|
|
304
440
|
export interface SubscriptionEvent {
|
|
305
441
|
name: SubscriptionEventName;
|
|
306
442
|
}
|
|
307
|
-
/**
|
|
308
|
-
* A data type representing an index field value, along with properties
|
|
309
|
-
* describing how to format and display the index field value.
|
|
310
|
-
*/
|
|
311
|
-
export type SearchResultFieldName = {
|
|
312
|
-
/**
|
|
313
|
-
* The index field name.
|
|
314
|
-
*/
|
|
315
|
-
fieldName: string;
|
|
316
|
-
/**
|
|
317
|
-
* The data type to treat this index field as.
|
|
318
|
-
*/
|
|
319
|
-
dataType: "text" | "date" | "number";
|
|
320
|
-
/**
|
|
321
|
-
* The locale to use when formatting dataType: `number`
|
|
322
|
-
*/
|
|
323
|
-
numberFormatLocale?: string;
|
|
324
|
-
/**
|
|
325
|
-
* If it's a number, the number format to apply.
|
|
326
|
-
* reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
|
|
327
|
-
*/
|
|
328
|
-
numberFormatOptions?: Intl.NumberFormatOptions;
|
|
329
|
-
/**
|
|
330
|
-
* A scale factor to apply to a `number` value.
|
|
331
|
-
*/
|
|
332
|
-
numberScale?: number;
|
|
333
|
-
/**
|
|
334
|
-
* TODO: Implement DateFormatOptions, for date formatting
|
|
335
|
-
*/
|
|
336
|
-
dateFormatOptions?: unknown;
|
|
337
|
-
};
|
|
338
|
-
/**
|
|
339
|
-
* A data type representing the mapping of index fields, for the purpose of rendering them
|
|
340
|
-
* in search result item.
|
|
341
|
-
*/
|
|
342
|
-
export type SearchResultMapping = {
|
|
343
|
-
/**
|
|
344
|
-
* The fields to map to.
|
|
345
|
-
*/
|
|
346
|
-
fieldNames: SearchResultFieldName[];
|
|
347
|
-
/**
|
|
348
|
-
* The delimiter used to join them.
|
|
349
|
-
*/
|
|
350
|
-
delimiter?: string;
|
|
351
|
-
};
|
|
352
|
-
export type SearchResultMappings = {
|
|
353
|
-
body?: SearchResultMapping;
|
|
354
|
-
buttonHref?: SearchResultMapping;
|
|
355
|
-
containerHref?: SearchResultMapping;
|
|
356
|
-
footer?: SearchResultMapping;
|
|
357
|
-
imageSource?: SearchResultMapping;
|
|
358
|
-
subtitle?: SearchResultMapping;
|
|
359
|
-
title?: SearchResultMapping;
|
|
360
|
-
};
|
|
361
|
-
export type PopoverResultMappings = {
|
|
362
|
-
title?: SearchResultMapping;
|
|
363
|
-
subtitle?: SearchResultMapping;
|
|
364
|
-
imageSource?: SearchResultMapping;
|
|
365
|
-
imageAlt?: SearchResultMapping;
|
|
366
|
-
href?: SearchResultMapping;
|
|
367
|
-
};
|
|
368
|
-
export interface FilterItem {
|
|
369
|
-
type: "facets" | "dateRange" | "numericRange" | "exactMatchToggle" | "mostRecentToggle";
|
|
370
|
-
label: string;
|
|
371
|
-
options: object | null;
|
|
372
|
-
}
|
|
373
|
-
export interface FacetsFilterItem extends FilterItem {
|
|
374
|
-
fieldName: string;
|
|
375
|
-
type: "facets";
|
|
376
|
-
options: {
|
|
377
|
-
showSublevel: boolean;
|
|
378
|
-
};
|
|
379
|
-
}
|
|
380
|
-
export interface NumericFilterItem extends FilterItem {
|
|
381
|
-
fieldName: string;
|
|
382
|
-
type: "numericRange";
|
|
383
|
-
options: {
|
|
384
|
-
min: number;
|
|
385
|
-
max: number;
|
|
386
|
-
granularity: number;
|
|
387
|
-
};
|
|
388
|
-
}
|
|
389
|
-
export interface DateRangeFilterItem extends FilterItem {
|
|
390
|
-
fieldName: string;
|
|
391
|
-
type: "dateRange";
|
|
392
|
-
options: {
|
|
393
|
-
minDate: Date;
|
|
394
|
-
maxDate: Date;
|
|
395
|
-
granularity: "year" | "month" | "day" | "hour";
|
|
396
|
-
};
|
|
397
|
-
}
|
|
398
|
-
export interface ExactMatchToggleFilterItem extends FilterItem {
|
|
399
|
-
type: "exactMatchToggle";
|
|
400
|
-
options: {
|
|
401
|
-
subLabel?: string;
|
|
402
|
-
};
|
|
403
|
-
}
|
|
404
|
-
export interface MostRecentToggleFilterItem extends FilterItem {
|
|
405
|
-
type: "mostRecentToggle";
|
|
406
|
-
options: {
|
|
407
|
-
subLabel?: string;
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
443
|
declare class AdClient {
|
|
411
444
|
config: SearchcraftConfig;
|
|
412
445
|
constructor(config: SearchcraftConfig);
|
|
@@ -450,12 +483,13 @@ declare class MeasureClient {
|
|
|
450
483
|
* @param {Partial<MeasureRequestProperties>} properties - Additional properties to send with the event.
|
|
451
484
|
* @param {Partial<MeasureRequestUser>} user - Additional user properites to send with the event.
|
|
452
485
|
*/
|
|
453
|
-
sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => void
|
|
486
|
+
sendMeasureEvent: (eventName: MeasureEventName, properties?: Partial<MeasureRequestProperties>, user?: Partial<MeasureRequestUser>) => Promise<void>;
|
|
454
487
|
}
|
|
455
488
|
declare class SearchClient {
|
|
456
489
|
private config;
|
|
457
490
|
private userId;
|
|
458
491
|
private parent;
|
|
492
|
+
private searchCompletedEventTimeout;
|
|
459
493
|
constructor(parent: SearchcraftCore, config: SearchcraftConfig, userId: string);
|
|
460
494
|
/**
|
|
461
495
|
* Getter for the base url used by the /search endpoint.
|
|
@@ -467,7 +501,10 @@ declare class SearchClient {
|
|
|
467
501
|
*/
|
|
468
502
|
getSearchResponse: (searchParams: SearchParams) => Promise<SearchcraftResponse>;
|
|
469
503
|
}
|
|
470
|
-
|
|
504
|
+
/**
|
|
505
|
+
* Javascript Class providing the functionality to interact with the Searchcraft BE
|
|
506
|
+
*/
|
|
507
|
+
export declare class SearchcraftCore {
|
|
471
508
|
config: SearchcraftConfig;
|
|
472
509
|
measureClient: MeasureClient | undefined;
|
|
473
510
|
searchClient: SearchClient | undefined;
|
|
@@ -511,1097 +548,61 @@ declare class SearchcraftCore {
|
|
|
511
548
|
*/
|
|
512
549
|
getItems: (searchParams: SearchParams, itemsCallback: (response: SearchcraftResponse, items: SearchClientResponseItem[]) => void, adCallback: (adClientResponseItems: AdClientResponseItem[]) => void) => void;
|
|
513
550
|
}
|
|
514
|
-
|
|
515
|
-
|
|
551
|
+
/**
|
|
552
|
+
* Callable functions made available by the SearchcraftStore.
|
|
553
|
+
*/
|
|
554
|
+
export interface SearchcraftStateFunctions {
|
|
555
|
+
addFacetPathsForIndexField: (data: FacetPathsForIndexField) => void;
|
|
556
|
+
addRangeValueForIndexField: (data: RangeValueForIndexField) => void;
|
|
557
|
+
getSearchcraftInstance: () => SearchcraftCore | undefined;
|
|
558
|
+
initialize: (searchcraft: unknown, debug?: boolean) => void;
|
|
559
|
+
removeFacetPathsForIndexField: (fieldName: string) => void;
|
|
560
|
+
removeRangeValueForIndexField: (fieldName: string) => void;
|
|
561
|
+
resetFacetPaths: () => void;
|
|
562
|
+
search: () => Promise<void>;
|
|
563
|
+
setPopoverVisibility: (isVisible: boolean) => void;
|
|
564
|
+
setSearchClientResponseItems: (results: SearchClientResponseItem[]) => void;
|
|
565
|
+
setSearchResultsPage: (page: number) => void;
|
|
566
|
+
setSearchResultsPerPage: (perPage: number) => void;
|
|
567
|
+
setSearchTerm: (searchTerm: string) => void;
|
|
568
|
+
setSearchMode: (mode: "fuzzy" | "exact") => void;
|
|
569
|
+
setSortType: (type: "asc" | "desc") => void;
|
|
570
|
+
setHotKeyAndHotKeyModifier: (hotkey?: string, hotkeyModifier?: "ctrl" | "meta" | "alt" | "option") => void;
|
|
516
571
|
}
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
code: JSXBase.HTMLAttributes;
|
|
540
|
-
col: JSXBase.ColHTMLAttributes<HTMLTableColElement>;
|
|
541
|
-
colgroup: JSXBase.ColgroupHTMLAttributes<HTMLTableColElement>;
|
|
542
|
-
data: JSXBase.HTMLAttributes<HTMLDataElement>;
|
|
543
|
-
datalist: JSXBase.HTMLAttributes<HTMLDataListElement>;
|
|
544
|
-
dd: JSXBase.HTMLAttributes;
|
|
545
|
-
del: JSXBase.DelHTMLAttributes<HTMLModElement>;
|
|
546
|
-
details: JSXBase.DetailsHTMLAttributes<HTMLElement>;
|
|
547
|
-
dfn: JSXBase.HTMLAttributes;
|
|
548
|
-
dialog: JSXBase.DialogHTMLAttributes<HTMLDialogElement>;
|
|
549
|
-
div: JSXBase.HTMLAttributes<HTMLDivElement>;
|
|
550
|
-
dl: JSXBase.HTMLAttributes<HTMLDListElement>;
|
|
551
|
-
dt: JSXBase.HTMLAttributes;
|
|
552
|
-
em: JSXBase.HTMLAttributes;
|
|
553
|
-
embed: JSXBase.EmbedHTMLAttributes<HTMLEmbedElement>;
|
|
554
|
-
fieldset: JSXBase.FieldsetHTMLAttributes<HTMLFieldSetElement>;
|
|
555
|
-
figcaption: JSXBase.HTMLAttributes;
|
|
556
|
-
figure: JSXBase.HTMLAttributes;
|
|
557
|
-
footer: JSXBase.HTMLAttributes;
|
|
558
|
-
form: JSXBase.FormHTMLAttributes<HTMLFormElement>;
|
|
559
|
-
h1: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
560
|
-
h2: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
561
|
-
h3: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
562
|
-
h4: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
563
|
-
h5: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
564
|
-
h6: JSXBase.HTMLAttributes<HTMLHeadingElement>;
|
|
565
|
-
head: JSXBase.HTMLAttributes<HTMLHeadElement>;
|
|
566
|
-
header: JSXBase.HTMLAttributes;
|
|
567
|
-
hgroup: JSXBase.HTMLAttributes;
|
|
568
|
-
hr: JSXBase.HTMLAttributes<HTMLHRElement>;
|
|
569
|
-
html: JSXBase.HTMLAttributes<HTMLHtmlElement>;
|
|
570
|
-
i: JSXBase.HTMLAttributes;
|
|
571
|
-
iframe: JSXBase.IframeHTMLAttributes<HTMLIFrameElement>;
|
|
572
|
-
img: JSXBase.ImgHTMLAttributes<HTMLImageElement>;
|
|
573
|
-
input: JSXBase.InputHTMLAttributes<HTMLInputElement>;
|
|
574
|
-
ins: JSXBase.InsHTMLAttributes<HTMLModElement>;
|
|
575
|
-
kbd: JSXBase.HTMLAttributes;
|
|
576
|
-
keygen: JSXBase.KeygenHTMLAttributes<HTMLElement>;
|
|
577
|
-
label: JSXBase.LabelHTMLAttributes<HTMLLabelElement>;
|
|
578
|
-
legend: JSXBase.HTMLAttributes<HTMLLegendElement>;
|
|
579
|
-
li: JSXBase.LiHTMLAttributes<HTMLLIElement>;
|
|
580
|
-
link: JSXBase.LinkHTMLAttributes<HTMLLinkElement>;
|
|
581
|
-
main: JSXBase.HTMLAttributes;
|
|
582
|
-
map: JSXBase.MapHTMLAttributes<HTMLMapElement>;
|
|
583
|
-
mark: JSXBase.HTMLAttributes;
|
|
584
|
-
menu: JSXBase.MenuHTMLAttributes<HTMLMenuElement>;
|
|
585
|
-
menuitem: JSXBase.HTMLAttributes;
|
|
586
|
-
meta: JSXBase.MetaHTMLAttributes<HTMLMetaElement>;
|
|
587
|
-
meter: JSXBase.MeterHTMLAttributes<HTMLMeterElement>;
|
|
588
|
-
nav: JSXBase.HTMLAttributes;
|
|
589
|
-
noscript: JSXBase.HTMLAttributes;
|
|
590
|
-
object: JSXBase.ObjectHTMLAttributes<HTMLObjectElement>;
|
|
591
|
-
ol: JSXBase.OlHTMLAttributes<HTMLOListElement>;
|
|
592
|
-
optgroup: JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>;
|
|
593
|
-
option: JSXBase.OptionHTMLAttributes<HTMLOptionElement>;
|
|
594
|
-
output: JSXBase.OutputHTMLAttributes<HTMLOutputElement>;
|
|
595
|
-
p: JSXBase.HTMLAttributes<HTMLParagraphElement>;
|
|
596
|
-
param: JSXBase.ParamHTMLAttributes<HTMLParamElement>;
|
|
597
|
-
picture: JSXBase.HTMLAttributes<HTMLPictureElement>;
|
|
598
|
-
pre: JSXBase.HTMLAttributes<HTMLPreElement>;
|
|
599
|
-
progress: JSXBase.ProgressHTMLAttributes<HTMLProgressElement>;
|
|
600
|
-
q: JSXBase.QuoteHTMLAttributes<HTMLQuoteElement>;
|
|
601
|
-
rp: JSXBase.HTMLAttributes;
|
|
602
|
-
rt: JSXBase.HTMLAttributes;
|
|
603
|
-
ruby: JSXBase.HTMLAttributes;
|
|
604
|
-
s: JSXBase.HTMLAttributes;
|
|
605
|
-
samp: JSXBase.HTMLAttributes;
|
|
606
|
-
script: JSXBase.ScriptHTMLAttributes<HTMLScriptElement>;
|
|
607
|
-
section: JSXBase.HTMLAttributes;
|
|
608
|
-
select: JSXBase.SelectHTMLAttributes<HTMLSelectElement>;
|
|
609
|
-
small: JSXBase.HTMLAttributes;
|
|
610
|
-
source: JSXBase.SourceHTMLAttributes<HTMLSourceElement>;
|
|
611
|
-
span: JSXBase.HTMLAttributes<HTMLSpanElement>;
|
|
612
|
-
strong: JSXBase.HTMLAttributes;
|
|
613
|
-
style: JSXBase.StyleHTMLAttributes<HTMLStyleElement>;
|
|
614
|
-
sub: JSXBase.HTMLAttributes;
|
|
615
|
-
summary: JSXBase.HTMLAttributes;
|
|
616
|
-
sup: JSXBase.HTMLAttributes;
|
|
617
|
-
table: JSXBase.TableHTMLAttributes<HTMLTableElement>;
|
|
618
|
-
tbody: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
|
|
619
|
-
td: JSXBase.TdHTMLAttributes<HTMLTableDataCellElement>;
|
|
620
|
-
textarea: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>;
|
|
621
|
-
tfoot: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
|
|
622
|
-
th: JSXBase.ThHTMLAttributes<HTMLTableHeaderCellElement>;
|
|
623
|
-
thead: JSXBase.HTMLAttributes<HTMLTableSectionElement>;
|
|
624
|
-
time: JSXBase.TimeHTMLAttributes<HTMLTimeElement>;
|
|
625
|
-
title: JSXBase.HTMLAttributes<HTMLTitleElement>;
|
|
626
|
-
tr: JSXBase.HTMLAttributes<HTMLTableRowElement>;
|
|
627
|
-
track: JSXBase.TrackHTMLAttributes<HTMLTrackElement>;
|
|
628
|
-
u: JSXBase.HTMLAttributes;
|
|
629
|
-
ul: JSXBase.HTMLAttributes<HTMLUListElement>;
|
|
630
|
-
var: JSXBase.HTMLAttributes;
|
|
631
|
-
video: JSXBase.VideoHTMLAttributes<HTMLVideoElement>;
|
|
632
|
-
wbr: JSXBase.HTMLAttributes;
|
|
633
|
-
animate: JSXBase.SVGAttributes;
|
|
634
|
-
circle: JSXBase.SVGAttributes;
|
|
635
|
-
clipPath: JSXBase.SVGAttributes;
|
|
636
|
-
defs: JSXBase.SVGAttributes;
|
|
637
|
-
desc: JSXBase.SVGAttributes;
|
|
638
|
-
ellipse: JSXBase.SVGAttributes;
|
|
639
|
-
feBlend: JSXBase.SVGAttributes;
|
|
640
|
-
feColorMatrix: JSXBase.SVGAttributes;
|
|
641
|
-
feComponentTransfer: JSXBase.SVGAttributes;
|
|
642
|
-
feComposite: JSXBase.SVGAttributes;
|
|
643
|
-
feConvolveMatrix: JSXBase.SVGAttributes;
|
|
644
|
-
feDiffuseLighting: JSXBase.SVGAttributes;
|
|
645
|
-
feDisplacementMap: JSXBase.SVGAttributes;
|
|
646
|
-
feDistantLight: JSXBase.SVGAttributes;
|
|
647
|
-
feDropShadow: JSXBase.SVGAttributes;
|
|
648
|
-
feFlood: JSXBase.SVGAttributes;
|
|
649
|
-
feFuncA: JSXBase.SVGAttributes;
|
|
650
|
-
feFuncB: JSXBase.SVGAttributes;
|
|
651
|
-
feFuncG: JSXBase.SVGAttributes;
|
|
652
|
-
feFuncR: JSXBase.SVGAttributes;
|
|
653
|
-
feGaussianBlur: JSXBase.SVGAttributes;
|
|
654
|
-
feImage: JSXBase.SVGAttributes;
|
|
655
|
-
feMerge: JSXBase.SVGAttributes;
|
|
656
|
-
feMergeNode: JSXBase.SVGAttributes;
|
|
657
|
-
feMorphology: JSXBase.SVGAttributes;
|
|
658
|
-
feOffset: JSXBase.SVGAttributes;
|
|
659
|
-
fePointLight: JSXBase.SVGAttributes;
|
|
660
|
-
feSpecularLighting: JSXBase.SVGAttributes;
|
|
661
|
-
feSpotLight: JSXBase.SVGAttributes;
|
|
662
|
-
feTile: JSXBase.SVGAttributes;
|
|
663
|
-
feTurbulence: JSXBase.SVGAttributes;
|
|
664
|
-
filter: JSXBase.SVGAttributes;
|
|
665
|
-
foreignObject: JSXBase.SVGAttributes;
|
|
666
|
-
g: JSXBase.SVGAttributes;
|
|
667
|
-
image: JSXBase.SVGAttributes;
|
|
668
|
-
line: JSXBase.SVGAttributes;
|
|
669
|
-
linearGradient: JSXBase.SVGAttributes;
|
|
670
|
-
marker: JSXBase.SVGAttributes;
|
|
671
|
-
mask: JSXBase.SVGAttributes;
|
|
672
|
-
metadata: JSXBase.SVGAttributes;
|
|
673
|
-
path: JSXBase.SVGAttributes;
|
|
674
|
-
pattern: JSXBase.SVGAttributes;
|
|
675
|
-
polygon: JSXBase.SVGAttributes;
|
|
676
|
-
polyline: JSXBase.SVGAttributes;
|
|
677
|
-
radialGradient: JSXBase.SVGAttributes;
|
|
678
|
-
rect: JSXBase.SVGAttributes;
|
|
679
|
-
stop: JSXBase.SVGAttributes;
|
|
680
|
-
svg: JSXBase.SVGAttributes;
|
|
681
|
-
switch: JSXBase.SVGAttributes;
|
|
682
|
-
symbol: JSXBase.SVGAttributes;
|
|
683
|
-
text: JSXBase.SVGAttributes;
|
|
684
|
-
textPath: JSXBase.SVGAttributes;
|
|
685
|
-
tspan: JSXBase.SVGAttributes;
|
|
686
|
-
use: JSXBase.SVGAttributes;
|
|
687
|
-
view: JSXBase.SVGAttributes;
|
|
688
|
-
}
|
|
689
|
-
interface SlotAttributes extends JSXAttributes {
|
|
690
|
-
name?: string;
|
|
691
|
-
slot?: string;
|
|
692
|
-
onSlotchange?: (event: Event) => void;
|
|
693
|
-
}
|
|
694
|
-
interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
695
|
-
download?: any;
|
|
696
|
-
href?: string;
|
|
697
|
-
hrefLang?: string;
|
|
698
|
-
hreflang?: string;
|
|
699
|
-
media?: string;
|
|
700
|
-
ping?: string;
|
|
701
|
-
rel?: string;
|
|
702
|
-
target?: string;
|
|
703
|
-
referrerPolicy?: ReferrerPolicy;
|
|
704
|
-
}
|
|
705
|
-
interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {
|
|
706
|
-
}
|
|
707
|
-
interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
708
|
-
alt?: string;
|
|
709
|
-
coords?: string;
|
|
710
|
-
download?: any;
|
|
711
|
-
href?: string;
|
|
712
|
-
hrefLang?: string;
|
|
713
|
-
hreflang?: string;
|
|
714
|
-
media?: string;
|
|
715
|
-
rel?: string;
|
|
716
|
-
shape?: string;
|
|
717
|
-
target?: string;
|
|
718
|
-
}
|
|
719
|
-
interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
720
|
-
href?: string;
|
|
721
|
-
target?: string;
|
|
722
|
-
}
|
|
723
|
-
interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
724
|
-
cite?: string;
|
|
725
|
-
}
|
|
726
|
-
interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
727
|
-
disabled?: boolean;
|
|
728
|
-
form?: string;
|
|
729
|
-
formAction?: string;
|
|
730
|
-
formaction?: string;
|
|
731
|
-
formEncType?: string;
|
|
732
|
-
formenctype?: string;
|
|
733
|
-
formMethod?: string;
|
|
734
|
-
formmethod?: string;
|
|
735
|
-
formNoValidate?: boolean;
|
|
736
|
-
formnovalidate?: boolean;
|
|
737
|
-
formTarget?: string;
|
|
738
|
-
formtarget?: string;
|
|
739
|
-
name?: string;
|
|
740
|
-
type?: string;
|
|
741
|
-
value?: string | string[] | number;
|
|
742
|
-
popoverTargetAction?: string;
|
|
743
|
-
popoverTargetElement?: Element | null;
|
|
744
|
-
popoverTarget?: string;
|
|
745
|
-
}
|
|
746
|
-
interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
747
|
-
height?: number | string;
|
|
748
|
-
width?: number | string;
|
|
749
|
-
}
|
|
750
|
-
interface ColHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
751
|
-
span?: number;
|
|
752
|
-
}
|
|
753
|
-
interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
754
|
-
span?: number;
|
|
755
|
-
}
|
|
756
|
-
interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
757
|
-
open?: boolean;
|
|
758
|
-
onToggle?: (event: Event) => void;
|
|
759
|
-
}
|
|
760
|
-
interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
761
|
-
cite?: string;
|
|
762
|
-
dateTime?: string;
|
|
763
|
-
datetime?: string;
|
|
764
|
-
}
|
|
765
|
-
interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
766
|
-
onCancel?: (event: Event) => void;
|
|
767
|
-
onClose?: (event: Event) => void;
|
|
768
|
-
open?: boolean;
|
|
769
|
-
returnValue?: string;
|
|
770
|
-
}
|
|
771
|
-
interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
772
|
-
height?: number | string;
|
|
773
|
-
src?: string;
|
|
774
|
-
type?: string;
|
|
775
|
-
width?: number | string;
|
|
776
|
-
}
|
|
777
|
-
interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
778
|
-
disabled?: boolean;
|
|
779
|
-
form?: string;
|
|
780
|
-
name?: string;
|
|
781
|
-
}
|
|
782
|
-
interface FormHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
783
|
-
acceptCharset?: string;
|
|
784
|
-
acceptcharset?: string;
|
|
785
|
-
action?: string;
|
|
786
|
-
autoComplete?: string;
|
|
787
|
-
autocomplete?: string;
|
|
788
|
-
encType?: string;
|
|
789
|
-
enctype?: string;
|
|
790
|
-
method?: string;
|
|
791
|
-
name?: string;
|
|
792
|
-
noValidate?: boolean;
|
|
793
|
-
novalidate?: boolean | string;
|
|
794
|
-
target?: string;
|
|
795
|
-
}
|
|
796
|
-
interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
797
|
-
manifest?: string;
|
|
798
|
-
}
|
|
799
|
-
interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
800
|
-
allow?: string;
|
|
801
|
-
allowFullScreen?: boolean;
|
|
802
|
-
allowfullScreen?: string | boolean;
|
|
803
|
-
allowTransparency?: boolean;
|
|
804
|
-
allowtransparency?: string | boolean;
|
|
805
|
-
frameBorder?: number | string;
|
|
806
|
-
frameborder?: number | string;
|
|
807
|
-
importance?: "low" | "auto" | "high";
|
|
808
|
-
height?: number | string;
|
|
809
|
-
loading?: "lazy" | "auto" | "eager";
|
|
810
|
-
marginHeight?: number;
|
|
811
|
-
marginheight?: string | number;
|
|
812
|
-
marginWidth?: number;
|
|
813
|
-
marginwidth?: string | number;
|
|
814
|
-
name?: string;
|
|
815
|
-
referrerPolicy?: ReferrerPolicy;
|
|
816
|
-
sandbox?: string;
|
|
817
|
-
scrolling?: string;
|
|
818
|
-
seamless?: boolean;
|
|
819
|
-
src?: string;
|
|
820
|
-
srcDoc?: string;
|
|
821
|
-
srcdoc?: string;
|
|
822
|
-
width?: number | string;
|
|
823
|
-
}
|
|
824
|
-
interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
825
|
-
alt?: string;
|
|
826
|
-
crossOrigin?: string;
|
|
827
|
-
crossorigin?: string;
|
|
828
|
-
decoding?: "async" | "auto" | "sync";
|
|
829
|
-
importance?: "low" | "auto" | "high";
|
|
830
|
-
height?: number | string;
|
|
831
|
-
loading?: "lazy" | "auto" | "eager";
|
|
832
|
-
sizes?: string;
|
|
833
|
-
src?: string;
|
|
834
|
-
srcSet?: string;
|
|
835
|
-
srcset?: string;
|
|
836
|
-
useMap?: string;
|
|
837
|
-
usemap?: string;
|
|
838
|
-
width?: number | string;
|
|
839
|
-
}
|
|
840
|
-
interface InsHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
841
|
-
cite?: string;
|
|
842
|
-
dateTime?: string;
|
|
843
|
-
datetime?: string;
|
|
844
|
-
}
|
|
845
|
-
interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
846
|
-
accept?: string;
|
|
847
|
-
allowdirs?: boolean;
|
|
848
|
-
alt?: string;
|
|
849
|
-
autoCapitalize?: string;
|
|
850
|
-
autocapitalize?: string;
|
|
851
|
-
autoComplete?: string;
|
|
852
|
-
autocomplete?: string;
|
|
853
|
-
capture?: string;
|
|
854
|
-
checked?: boolean;
|
|
855
|
-
crossOrigin?: string;
|
|
856
|
-
crossorigin?: string;
|
|
857
|
-
defaultChecked?: boolean;
|
|
858
|
-
defaultValue?: string;
|
|
859
|
-
dirName?: string;
|
|
860
|
-
disabled?: boolean;
|
|
861
|
-
files?: any;
|
|
862
|
-
form?: string;
|
|
863
|
-
formAction?: string;
|
|
864
|
-
formaction?: string;
|
|
865
|
-
formEncType?: string;
|
|
866
|
-
formenctype?: string;
|
|
867
|
-
formMethod?: string;
|
|
868
|
-
formmethod?: string;
|
|
869
|
-
formNoValidate?: boolean;
|
|
870
|
-
formnovalidate?: boolean;
|
|
871
|
-
formTarget?: string;
|
|
872
|
-
formtarget?: string;
|
|
873
|
-
height?: number | string;
|
|
874
|
-
indeterminate?: boolean;
|
|
875
|
-
list?: string;
|
|
876
|
-
max?: number | string;
|
|
877
|
-
maxLength?: number;
|
|
878
|
-
maxlength?: number | string;
|
|
879
|
-
min?: number | string;
|
|
880
|
-
minLength?: number;
|
|
881
|
-
minlength?: number | string;
|
|
882
|
-
multiple?: boolean;
|
|
883
|
-
name?: string;
|
|
884
|
-
onSelect?: (event: Event) => void;
|
|
885
|
-
onselect?: (event: Event) => void;
|
|
886
|
-
pattern?: string;
|
|
887
|
-
placeholder?: string;
|
|
888
|
-
readOnly?: boolean;
|
|
889
|
-
readonly?: boolean | string;
|
|
890
|
-
required?: boolean;
|
|
891
|
-
selectionStart?: number | string;
|
|
892
|
-
selectionEnd?: number | string;
|
|
893
|
-
selectionDirection?: string;
|
|
894
|
-
size?: number;
|
|
895
|
-
src?: string;
|
|
896
|
-
step?: number | string;
|
|
897
|
-
type?: string;
|
|
898
|
-
value?: string | string[] | number;
|
|
899
|
-
valueAsDate?: any;
|
|
900
|
-
valueAsNumber?: any;
|
|
901
|
-
webkitdirectory?: boolean;
|
|
902
|
-
webkitEntries?: any;
|
|
903
|
-
width?: number | string;
|
|
904
|
-
popoverTargetAction?: string;
|
|
905
|
-
popoverTargetElement?: Element | null;
|
|
906
|
-
popoverTarget?: string;
|
|
907
|
-
}
|
|
908
|
-
interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
909
|
-
challenge?: string;
|
|
910
|
-
disabled?: boolean;
|
|
911
|
-
form?: string;
|
|
912
|
-
keyType?: string;
|
|
913
|
-
keytype?: string;
|
|
914
|
-
keyParams?: string;
|
|
915
|
-
keyparams?: string;
|
|
916
|
-
name?: string;
|
|
917
|
-
}
|
|
918
|
-
interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
919
|
-
form?: string;
|
|
920
|
-
htmlFor?: string;
|
|
921
|
-
}
|
|
922
|
-
interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
923
|
-
value?: string | string[] | number;
|
|
924
|
-
}
|
|
925
|
-
interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
926
|
-
as?: string;
|
|
927
|
-
href?: string;
|
|
928
|
-
hrefLang?: string;
|
|
929
|
-
hreflang?: string;
|
|
930
|
-
importance?: "low" | "auto" | "high";
|
|
931
|
-
integrity?: string;
|
|
932
|
-
media?: string;
|
|
933
|
-
rel?: string;
|
|
934
|
-
sizes?: string;
|
|
935
|
-
type?: string;
|
|
936
|
-
}
|
|
937
|
-
interface MapHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
938
|
-
name?: string;
|
|
939
|
-
}
|
|
940
|
-
interface MenuHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
941
|
-
type?: string;
|
|
942
|
-
}
|
|
943
|
-
interface MediaHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
944
|
-
autoPlay?: boolean;
|
|
945
|
-
autoplay?: boolean | string;
|
|
946
|
-
controls?: boolean;
|
|
947
|
-
controlslist?: "nodownload" | "nofullscreen" | "noremoteplayback";
|
|
948
|
-
controlsList?: "nodownload" | "nofullscreen" | "noremoteplayback";
|
|
949
|
-
crossOrigin?: string;
|
|
950
|
-
crossorigin?: string;
|
|
951
|
-
loop?: boolean;
|
|
952
|
-
mediaGroup?: string;
|
|
953
|
-
mediagroup?: string;
|
|
954
|
-
muted?: boolean;
|
|
955
|
-
preload?: string;
|
|
956
|
-
src?: string;
|
|
957
|
-
onAbort?: (event: Event) => void;
|
|
958
|
-
onCanPlay?: (event: Event) => void;
|
|
959
|
-
onCanPlayThrough?: (event: Event) => void;
|
|
960
|
-
onDurationChange?: (event: Event) => void;
|
|
961
|
-
onEmptied?: (event: Event) => void;
|
|
962
|
-
onEnded?: (event: Event) => void;
|
|
963
|
-
onError?: (event: Event) => void;
|
|
964
|
-
onInterruptBegin?: (event: Event) => void;
|
|
965
|
-
onInterruptEnd?: (event: Event) => void;
|
|
966
|
-
onLoadedData?: (event: Event) => void;
|
|
967
|
-
onLoadedMetaData?: (event: Event) => void;
|
|
968
|
-
onLoadStart?: (event: Event) => void;
|
|
969
|
-
onMozAudioAvailable?: (event: Event) => void;
|
|
970
|
-
onPause?: (event: Event) => void;
|
|
971
|
-
onPlay?: (event: Event) => void;
|
|
972
|
-
onPlaying?: (event: Event) => void;
|
|
973
|
-
onProgress?: (event: Event) => void;
|
|
974
|
-
onRateChange?: (event: Event) => void;
|
|
975
|
-
onSeeked?: (event: Event) => void;
|
|
976
|
-
onSeeking?: (event: Event) => void;
|
|
977
|
-
onStalled?: (event: Event) => void;
|
|
978
|
-
onSuspend?: (event: Event) => void;
|
|
979
|
-
onTimeUpdate?: (event: Event) => void;
|
|
980
|
-
onVolumeChange?: (event: Event) => void;
|
|
981
|
-
onWaiting?: (event: Event) => void;
|
|
982
|
-
}
|
|
983
|
-
interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
984
|
-
charSet?: string;
|
|
985
|
-
charset?: string;
|
|
986
|
-
content?: string;
|
|
987
|
-
httpEquiv?: string;
|
|
988
|
-
httpequiv?: string;
|
|
989
|
-
name?: string;
|
|
990
|
-
}
|
|
991
|
-
interface MeterHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
992
|
-
form?: string;
|
|
993
|
-
high?: number;
|
|
994
|
-
low?: number;
|
|
995
|
-
max?: number | string;
|
|
996
|
-
min?: number | string;
|
|
997
|
-
optimum?: number;
|
|
998
|
-
value?: string | string[] | number;
|
|
999
|
-
}
|
|
1000
|
-
interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1001
|
-
cite?: string;
|
|
1002
|
-
}
|
|
1003
|
-
interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1004
|
-
classID?: string;
|
|
1005
|
-
classid?: string;
|
|
1006
|
-
data?: string;
|
|
1007
|
-
form?: string;
|
|
1008
|
-
height?: number | string;
|
|
1009
|
-
name?: string;
|
|
1010
|
-
type?: string;
|
|
1011
|
-
useMap?: string;
|
|
1012
|
-
usemap?: string;
|
|
1013
|
-
width?: number | string;
|
|
1014
|
-
wmode?: string;
|
|
1015
|
-
}
|
|
1016
|
-
interface OlHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1017
|
-
reversed?: boolean;
|
|
1018
|
-
start?: number;
|
|
1019
|
-
}
|
|
1020
|
-
interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1021
|
-
disabled?: boolean;
|
|
1022
|
-
label?: string;
|
|
1023
|
-
}
|
|
1024
|
-
interface OptionHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1025
|
-
disabled?: boolean;
|
|
1026
|
-
label?: string;
|
|
1027
|
-
selected?: boolean;
|
|
1028
|
-
value?: string | string[] | number;
|
|
1029
|
-
}
|
|
1030
|
-
interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1031
|
-
form?: string;
|
|
1032
|
-
htmlFor?: string;
|
|
1033
|
-
name?: string;
|
|
1034
|
-
}
|
|
1035
|
-
interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1036
|
-
name?: string;
|
|
1037
|
-
value?: string | string[] | number;
|
|
1038
|
-
}
|
|
1039
|
-
interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1040
|
-
max?: number | string;
|
|
1041
|
-
value?: string | string[] | number;
|
|
1042
|
-
}
|
|
1043
|
-
interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1044
|
-
async?: boolean;
|
|
1045
|
-
charSet?: string;
|
|
1046
|
-
charset?: string;
|
|
1047
|
-
crossOrigin?: string;
|
|
1048
|
-
crossorigin?: string;
|
|
1049
|
-
defer?: boolean;
|
|
1050
|
-
importance?: "low" | "auto" | "high";
|
|
1051
|
-
integrity?: string;
|
|
1052
|
-
nonce?: string;
|
|
1053
|
-
src?: string;
|
|
1054
|
-
type?: string;
|
|
1055
|
-
}
|
|
1056
|
-
interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1057
|
-
disabled?: boolean;
|
|
1058
|
-
form?: string;
|
|
1059
|
-
multiple?: boolean;
|
|
1060
|
-
name?: string;
|
|
1061
|
-
required?: boolean;
|
|
1062
|
-
size?: number;
|
|
1063
|
-
autoComplete?: string;
|
|
1064
|
-
autocomplete?: string;
|
|
1065
|
-
}
|
|
1066
|
-
interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1067
|
-
height?: number;
|
|
1068
|
-
media?: string;
|
|
1069
|
-
sizes?: string;
|
|
1070
|
-
src?: string;
|
|
1071
|
-
srcSet?: string;
|
|
1072
|
-
type?: string;
|
|
1073
|
-
width?: number;
|
|
1074
|
-
}
|
|
1075
|
-
interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1076
|
-
media?: string;
|
|
1077
|
-
nonce?: string;
|
|
1078
|
-
scoped?: boolean;
|
|
1079
|
-
type?: string;
|
|
1080
|
-
}
|
|
1081
|
-
interface TableHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1082
|
-
cellPadding?: number | string;
|
|
1083
|
-
cellpadding?: number | string;
|
|
1084
|
-
cellSpacing?: number | string;
|
|
1085
|
-
cellspacing?: number | string;
|
|
1086
|
-
summary?: string;
|
|
1087
|
-
}
|
|
1088
|
-
interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1089
|
-
autoComplete?: string;
|
|
1090
|
-
autocomplete?: string;
|
|
1091
|
-
cols?: number;
|
|
1092
|
-
disabled?: boolean;
|
|
1093
|
-
form?: string;
|
|
1094
|
-
maxLength?: number;
|
|
1095
|
-
maxlength?: number | string;
|
|
1096
|
-
minLength?: number;
|
|
1097
|
-
minlength?: number | string;
|
|
1098
|
-
name?: string;
|
|
1099
|
-
onSelect?: (event: Event) => void;
|
|
1100
|
-
onselect?: (event: Event) => void;
|
|
1101
|
-
placeholder?: string;
|
|
1102
|
-
readOnly?: boolean;
|
|
1103
|
-
readonly?: boolean | string;
|
|
1104
|
-
required?: boolean;
|
|
1105
|
-
rows?: number;
|
|
1106
|
-
value?: string | string[] | number;
|
|
1107
|
-
wrap?: string;
|
|
1108
|
-
}
|
|
1109
|
-
interface TdHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1110
|
-
colSpan?: number;
|
|
1111
|
-
headers?: string;
|
|
1112
|
-
rowSpan?: number;
|
|
1113
|
-
}
|
|
1114
|
-
interface ThHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1115
|
-
abbr?: string;
|
|
1116
|
-
colSpan?: number;
|
|
1117
|
-
headers?: string;
|
|
1118
|
-
rowSpan?: number;
|
|
1119
|
-
rowspan?: number | string;
|
|
1120
|
-
scope?: string;
|
|
1121
|
-
}
|
|
1122
|
-
interface TimeHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1123
|
-
dateTime?: string;
|
|
1124
|
-
}
|
|
1125
|
-
interface TrackHTMLAttributes<T> extends HTMLAttributes<T> {
|
|
1126
|
-
default?: boolean;
|
|
1127
|
-
kind?: string;
|
|
1128
|
-
label?: string;
|
|
1129
|
-
src?: string;
|
|
1130
|
-
srcLang?: string;
|
|
1131
|
-
srclang?: string;
|
|
1132
|
-
}
|
|
1133
|
-
interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
|
|
1134
|
-
height?: number | string;
|
|
1135
|
-
playsInline?: boolean;
|
|
1136
|
-
playsinline?: boolean | string;
|
|
1137
|
-
poster?: string;
|
|
1138
|
-
width?: number | string;
|
|
1139
|
-
}
|
|
1140
|
-
interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
|
|
1141
|
-
innerHTML?: string;
|
|
1142
|
-
accessKey?: string;
|
|
1143
|
-
autoFocus?: boolean;
|
|
1144
|
-
autofocus?: boolean | string;
|
|
1145
|
-
class?: string | {
|
|
1146
|
-
[className: string]: boolean;
|
|
1147
|
-
};
|
|
1148
|
-
contentEditable?: boolean | string;
|
|
1149
|
-
contenteditable?: boolean | string;
|
|
1150
|
-
contextMenu?: string;
|
|
1151
|
-
contextmenu?: string;
|
|
1152
|
-
dir?: string;
|
|
1153
|
-
draggable?: boolean;
|
|
1154
|
-
hidden?: boolean;
|
|
1155
|
-
id?: string;
|
|
1156
|
-
inert?: boolean;
|
|
1157
|
-
lang?: string;
|
|
1158
|
-
spellcheck?: "true" | "false" | any;
|
|
1159
|
-
style?: {
|
|
1160
|
-
[key: string]: string | undefined;
|
|
1161
|
-
};
|
|
1162
|
-
tabIndex?: number;
|
|
1163
|
-
tabindex?: number | string;
|
|
1164
|
-
title?: string;
|
|
1165
|
-
popover?: string | null;
|
|
1166
|
-
inputMode?: string;
|
|
1167
|
-
inputmode?: string;
|
|
1168
|
-
enterKeyHint?: string;
|
|
1169
|
-
enterkeyhint?: string;
|
|
1170
|
-
is?: string;
|
|
1171
|
-
radioGroup?: string;
|
|
1172
|
-
radiogroup?: string;
|
|
1173
|
-
role?: string;
|
|
1174
|
-
about?: string;
|
|
1175
|
-
datatype?: string;
|
|
1176
|
-
inlist?: any;
|
|
1177
|
-
prefix?: string;
|
|
1178
|
-
property?: string;
|
|
1179
|
-
resource?: string;
|
|
1180
|
-
typeof?: string;
|
|
1181
|
-
vocab?: string;
|
|
1182
|
-
autoCapitalize?: string;
|
|
1183
|
-
autocapitalize?: string;
|
|
1184
|
-
autoCorrect?: string;
|
|
1185
|
-
autocorrect?: string;
|
|
1186
|
-
autoSave?: string;
|
|
1187
|
-
autosave?: string;
|
|
1188
|
-
color?: string;
|
|
1189
|
-
itemProp?: string;
|
|
1190
|
-
itemprop?: string;
|
|
1191
|
-
itemScope?: boolean;
|
|
1192
|
-
itemscope?: boolean;
|
|
1193
|
-
itemType?: string;
|
|
1194
|
-
itemtype?: string;
|
|
1195
|
-
itemID?: string;
|
|
1196
|
-
itemid?: string;
|
|
1197
|
-
itemRef?: string;
|
|
1198
|
-
itemref?: string;
|
|
1199
|
-
results?: number;
|
|
1200
|
-
security?: string;
|
|
1201
|
-
unselectable?: boolean;
|
|
1202
|
-
}
|
|
1203
|
-
interface SVGAttributes<T = SVGElement> extends DOMAttributes<T> {
|
|
1204
|
-
class?: string | {
|
|
1205
|
-
[className: string]: boolean;
|
|
1206
|
-
};
|
|
1207
|
-
color?: string;
|
|
1208
|
-
height?: number | string;
|
|
1209
|
-
id?: string;
|
|
1210
|
-
lang?: string;
|
|
1211
|
-
max?: number | string;
|
|
1212
|
-
media?: string;
|
|
1213
|
-
method?: string;
|
|
1214
|
-
min?: number | string;
|
|
1215
|
-
name?: string;
|
|
1216
|
-
style?: {
|
|
1217
|
-
[key: string]: string | undefined;
|
|
1218
|
-
};
|
|
1219
|
-
target?: string;
|
|
1220
|
-
type?: string;
|
|
1221
|
-
width?: number | string;
|
|
1222
|
-
role?: string;
|
|
1223
|
-
tabindex?: number;
|
|
1224
|
-
"accent-height"?: number | string;
|
|
1225
|
-
accumulate?: "none" | "sum";
|
|
1226
|
-
additive?: "replace" | "sum";
|
|
1227
|
-
"alignment-baseline"?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
|
|
1228
|
-
allowReorder?: "no" | "yes";
|
|
1229
|
-
alphabetic?: number | string;
|
|
1230
|
-
amplitude?: number | string;
|
|
1231
|
-
"arabic-form"?: "initial" | "medial" | "terminal" | "isolated";
|
|
1232
|
-
ascent?: number | string;
|
|
1233
|
-
attributeName?: string;
|
|
1234
|
-
attributeType?: string;
|
|
1235
|
-
autoReverse?: number | string;
|
|
1236
|
-
azimuth?: number | string;
|
|
1237
|
-
baseFrequency?: number | string;
|
|
1238
|
-
"baseline-shift"?: number | string;
|
|
1239
|
-
baseProfile?: number | string;
|
|
1240
|
-
bbox?: number | string;
|
|
1241
|
-
begin?: number | string;
|
|
1242
|
-
bias?: number | string;
|
|
1243
|
-
by?: number | string;
|
|
1244
|
-
calcMode?: number | string;
|
|
1245
|
-
"cap-height"?: number | string;
|
|
1246
|
-
clip?: number | string;
|
|
1247
|
-
"clip-path"?: string;
|
|
1248
|
-
clipPathUnits?: number | string;
|
|
1249
|
-
"clip-rule"?: number | string;
|
|
1250
|
-
"color-interpolation"?: number | string;
|
|
1251
|
-
"color-interpolation-filters"?: "auto" | "sRGB" | "linearRGB";
|
|
1252
|
-
"color-profile"?: number | string;
|
|
1253
|
-
"color-rendering"?: number | string;
|
|
1254
|
-
contentScriptType?: number | string;
|
|
1255
|
-
contentStyleType?: number | string;
|
|
1256
|
-
cursor?: number | string;
|
|
1257
|
-
cx?: number | string;
|
|
1258
|
-
cy?: number | string;
|
|
1259
|
-
d?: string;
|
|
1260
|
-
decelerate?: number | string;
|
|
1261
|
-
descent?: number | string;
|
|
1262
|
-
diffuseConstant?: number | string;
|
|
1263
|
-
direction?: number | string;
|
|
1264
|
-
display?: number | string;
|
|
1265
|
-
divisor?: number | string;
|
|
1266
|
-
"dominant-baseline"?: number | string;
|
|
1267
|
-
dur?: number | string;
|
|
1268
|
-
dx?: number | string;
|
|
1269
|
-
dy?: number | string;
|
|
1270
|
-
"edge-mode"?: number | string;
|
|
1271
|
-
elevation?: number | string;
|
|
1272
|
-
"enable-background"?: number | string;
|
|
1273
|
-
end?: number | string;
|
|
1274
|
-
exponent?: number | string;
|
|
1275
|
-
externalResourcesRequired?: number | string;
|
|
1276
|
-
fill?: string;
|
|
1277
|
-
"fill-opacity"?: number | string;
|
|
1278
|
-
"fill-rule"?: "nonzero" | "evenodd" | "inherit";
|
|
1279
|
-
filter?: string;
|
|
1280
|
-
filterRes?: number | string;
|
|
1281
|
-
filterUnits?: number | string;
|
|
1282
|
-
"flood-color"?: number | string;
|
|
1283
|
-
"flood-opacity"?: number | string;
|
|
1284
|
-
focusable?: number | string;
|
|
1285
|
-
"font-family"?: string;
|
|
1286
|
-
"font-size"?: number | string;
|
|
1287
|
-
"font-size-adjust"?: number | string;
|
|
1288
|
-
"font-stretch"?: number | string;
|
|
1289
|
-
"font-style"?: number | string;
|
|
1290
|
-
"font-variant"?: number | string;
|
|
1291
|
-
"font-weight"?: number | string;
|
|
1292
|
-
format?: number | string;
|
|
1293
|
-
from?: number | string;
|
|
1294
|
-
fx?: number | string;
|
|
1295
|
-
fy?: number | string;
|
|
1296
|
-
g1?: number | string;
|
|
1297
|
-
g2?: number | string;
|
|
1298
|
-
"glyph-name"?: number | string;
|
|
1299
|
-
"glyph-orientation-horizontal"?: number | string;
|
|
1300
|
-
"glyph-orientation-vertical"?: number | string;
|
|
1301
|
-
glyphRef?: number | string;
|
|
1302
|
-
gradientTransform?: string;
|
|
1303
|
-
gradientUnits?: string;
|
|
1304
|
-
hanging?: number | string;
|
|
1305
|
-
"horiz-adv-x"?: number | string;
|
|
1306
|
-
"horiz-origin-x"?: number | string;
|
|
1307
|
-
href?: string;
|
|
1308
|
-
ideographic?: number | string;
|
|
1309
|
-
"image-rendering"?: number | string;
|
|
1310
|
-
in2?: number | string;
|
|
1311
|
-
in?: string;
|
|
1312
|
-
intercept?: number | string;
|
|
1313
|
-
k1?: number | string;
|
|
1314
|
-
k2?: number | string;
|
|
1315
|
-
k3?: number | string;
|
|
1316
|
-
k4?: number | string;
|
|
1317
|
-
k?: number | string;
|
|
1318
|
-
kernelMatrix?: number | string;
|
|
1319
|
-
kernelUnitLength?: number | string;
|
|
1320
|
-
kerning?: number | string;
|
|
1321
|
-
keyPoints?: number | string;
|
|
1322
|
-
keySplines?: number | string;
|
|
1323
|
-
keyTimes?: number | string;
|
|
1324
|
-
lengthAdjust?: number | string;
|
|
1325
|
-
"letter-spacing"?: number | string;
|
|
1326
|
-
"lighting-color"?: number | string;
|
|
1327
|
-
limitingConeAngle?: number | string;
|
|
1328
|
-
local?: number | string;
|
|
1329
|
-
"marker-end"?: string;
|
|
1330
|
-
markerHeight?: number | string;
|
|
1331
|
-
"marker-mid"?: string;
|
|
1332
|
-
"marker-start"?: string;
|
|
1333
|
-
markerUnits?: number | string;
|
|
1334
|
-
markerWidth?: number | string;
|
|
1335
|
-
mask?: string;
|
|
1336
|
-
maskContentUnits?: number | string;
|
|
1337
|
-
maskUnits?: number | string;
|
|
1338
|
-
mathematical?: number | string;
|
|
1339
|
-
mode?: number | string;
|
|
1340
|
-
numOctaves?: number | string;
|
|
1341
|
-
offset?: number | string;
|
|
1342
|
-
opacity?: number | string;
|
|
1343
|
-
operator?: number | string;
|
|
1344
|
-
order?: number | string;
|
|
1345
|
-
orient?: number | string;
|
|
1346
|
-
orientation?: number | string;
|
|
1347
|
-
origin?: number | string;
|
|
1348
|
-
overflow?: number | string;
|
|
1349
|
-
"overline-position"?: number | string;
|
|
1350
|
-
"overline-thickness"?: number | string;
|
|
1351
|
-
"paint-order"?: number | string;
|
|
1352
|
-
panose1?: number | string;
|
|
1353
|
-
pathLength?: number | string;
|
|
1354
|
-
patternContentUnits?: string;
|
|
1355
|
-
patternTransform?: number | string;
|
|
1356
|
-
patternUnits?: string;
|
|
1357
|
-
"pointer-events"?: number | string;
|
|
1358
|
-
points?: string;
|
|
1359
|
-
pointsAtX?: number | string;
|
|
1360
|
-
pointsAtY?: number | string;
|
|
1361
|
-
pointsAtZ?: number | string;
|
|
1362
|
-
preserveAlpha?: number | string;
|
|
1363
|
-
preserveAspectRatio?: string;
|
|
1364
|
-
primitiveUnits?: number | string;
|
|
1365
|
-
r?: number | string;
|
|
1366
|
-
radius?: number | string;
|
|
1367
|
-
refX?: number | string;
|
|
1368
|
-
refY?: number | string;
|
|
1369
|
-
"rendering-intent"?: number | string;
|
|
1370
|
-
repeatCount?: number | string;
|
|
1371
|
-
repeatDur?: number | string;
|
|
1372
|
-
requiredextensions?: number | string;
|
|
1373
|
-
requiredFeatures?: number | string;
|
|
1374
|
-
restart?: number | string;
|
|
1375
|
-
result?: string;
|
|
1376
|
-
rotate?: number | string;
|
|
1377
|
-
rx?: number | string;
|
|
1378
|
-
ry?: number | string;
|
|
1379
|
-
scale?: number | string;
|
|
1380
|
-
seed?: number | string;
|
|
1381
|
-
"shape-rendering"?: number | string;
|
|
1382
|
-
slope?: number | string;
|
|
1383
|
-
spacing?: number | string;
|
|
1384
|
-
specularConstant?: number | string;
|
|
1385
|
-
specularExponent?: number | string;
|
|
1386
|
-
speed?: number | string;
|
|
1387
|
-
spreadMethod?: string;
|
|
1388
|
-
startOffset?: number | string;
|
|
1389
|
-
stdDeviation?: number | string;
|
|
1390
|
-
stemh?: number | string;
|
|
1391
|
-
stemv?: number | string;
|
|
1392
|
-
stitchTiles?: number | string;
|
|
1393
|
-
"stop-color"?: string;
|
|
1394
|
-
"stop-opacity"?: number | string;
|
|
1395
|
-
"strikethrough-position"?: number | string;
|
|
1396
|
-
"strikethrough-thickness"?: number | string;
|
|
1397
|
-
string?: number | string;
|
|
1398
|
-
stroke?: string;
|
|
1399
|
-
"stroke-dasharray"?: string | number;
|
|
1400
|
-
"stroke-dashoffset"?: string | number;
|
|
1401
|
-
"stroke-linecap"?: "butt" | "round" | "square" | "inherit";
|
|
1402
|
-
"stroke-linejoin"?: "miter" | "round" | "bevel" | "inherit";
|
|
1403
|
-
"stroke-miterlimit"?: string;
|
|
1404
|
-
"stroke-opacity"?: number | string;
|
|
1405
|
-
"stroke-width"?: number | string;
|
|
1406
|
-
surfaceScale?: number | string;
|
|
1407
|
-
systemLanguage?: number | string;
|
|
1408
|
-
tableValues?: number | string;
|
|
1409
|
-
targetX?: number | string;
|
|
1410
|
-
targetY?: number | string;
|
|
1411
|
-
"text-anchor"?: string;
|
|
1412
|
-
"text-decoration"?: number | string;
|
|
1413
|
-
textLength?: number | string;
|
|
1414
|
-
"text-rendering"?: number | string;
|
|
1415
|
-
to?: number | string;
|
|
1416
|
-
transform?: string;
|
|
1417
|
-
u1?: number | string;
|
|
1418
|
-
u2?: number | string;
|
|
1419
|
-
"underline-position"?: number | string;
|
|
1420
|
-
"underline-thickness"?: number | string;
|
|
1421
|
-
unicode?: number | string;
|
|
1422
|
-
"unicode-bidi"?: number | string;
|
|
1423
|
-
"unicode-range"?: number | string;
|
|
1424
|
-
"units-per-em"?: number | string;
|
|
1425
|
-
"v-alphabetic"?: number | string;
|
|
1426
|
-
values?: string;
|
|
1427
|
-
"vector-effect"?: number | string;
|
|
1428
|
-
version?: string;
|
|
1429
|
-
"vert-adv-y"?: number | string;
|
|
1430
|
-
"vert-origin-x"?: number | string;
|
|
1431
|
-
"vert-origin-y"?: number | string;
|
|
1432
|
-
"v-hanging"?: number | string;
|
|
1433
|
-
"v-ideographic"?: number | string;
|
|
1434
|
-
viewBox?: string;
|
|
1435
|
-
viewTarget?: number | string;
|
|
1436
|
-
visibility?: number | string;
|
|
1437
|
-
"v-mathematical"?: number | string;
|
|
1438
|
-
widths?: number | string;
|
|
1439
|
-
"word-spacing"?: number | string;
|
|
1440
|
-
"writing-mode"?: number | string;
|
|
1441
|
-
x1?: number | string;
|
|
1442
|
-
x2?: number | string;
|
|
1443
|
-
x?: number | string;
|
|
1444
|
-
"x-channel-selector"?: string;
|
|
1445
|
-
"x-height"?: number | string;
|
|
1446
|
-
xlinkActuate?: string;
|
|
1447
|
-
xlinkArcrole?: string;
|
|
1448
|
-
xlinkHref?: string;
|
|
1449
|
-
xlinkRole?: string;
|
|
1450
|
-
xlinkShow?: string;
|
|
1451
|
-
xlinkTitle?: string;
|
|
1452
|
-
xlinkType?: string;
|
|
1453
|
-
xmlBase?: string;
|
|
1454
|
-
xmlLang?: string;
|
|
1455
|
-
xmlns?: string;
|
|
1456
|
-
xmlSpace?: string;
|
|
1457
|
-
y1?: number | string;
|
|
1458
|
-
y2?: number | string;
|
|
1459
|
-
y?: number | string;
|
|
1460
|
-
yChannelSelector?: string;
|
|
1461
|
-
z?: number | string;
|
|
1462
|
-
zoomAndPan?: string;
|
|
1463
|
-
}
|
|
1464
|
-
interface DOMAttributes<T> extends JSXAttributes<T> {
|
|
1465
|
-
slot?: string;
|
|
1466
|
-
part?: string;
|
|
1467
|
-
exportparts?: string;
|
|
1468
|
-
onCopy?: (event: ClipboardEvent) => void;
|
|
1469
|
-
onCopyCapture?: (event: ClipboardEvent) => void;
|
|
1470
|
-
onCut?: (event: ClipboardEvent) => void;
|
|
1471
|
-
onCutCapture?: (event: ClipboardEvent) => void;
|
|
1472
|
-
onPaste?: (event: ClipboardEvent) => void;
|
|
1473
|
-
onPasteCapture?: (event: ClipboardEvent) => void;
|
|
1474
|
-
onCompositionend?: (event: CompositionEvent) => void;
|
|
1475
|
-
onCompositionendCapture?: (event: CompositionEvent) => void;
|
|
1476
|
-
onCompositionstart?: (event: CompositionEvent) => void;
|
|
1477
|
-
onCompositionstartCapture?: (event: CompositionEvent) => void;
|
|
1478
|
-
onCompositionupdate?: (event: CompositionEvent) => void;
|
|
1479
|
-
onCompositionupdateCapture?: (event: CompositionEvent) => void;
|
|
1480
|
-
onFocus?: (event: FocusEvent) => void;
|
|
1481
|
-
onFocusCapture?: (event: FocusEvent) => void;
|
|
1482
|
-
onFocusin?: (event: FocusEvent) => void;
|
|
1483
|
-
onFocusinCapture?: (event: FocusEvent) => void;
|
|
1484
|
-
onFocusout?: (event: FocusEvent) => void;
|
|
1485
|
-
onFocusoutCapture?: (event: FocusEvent) => void;
|
|
1486
|
-
onBlur?: (event: FocusEvent) => void;
|
|
1487
|
-
onBlurCapture?: (event: FocusEvent) => void;
|
|
1488
|
-
onChange?: (event: Event) => void;
|
|
1489
|
-
onChangeCapture?: (event: Event) => void;
|
|
1490
|
-
onInput?: (event: InputEvent) => void;
|
|
1491
|
-
onInputCapture?: (event: InputEvent) => void;
|
|
1492
|
-
onReset?: (event: Event) => void;
|
|
1493
|
-
onResetCapture?: (event: Event) => void;
|
|
1494
|
-
onSubmit?: (event: Event) => void;
|
|
1495
|
-
onSubmitCapture?: (event: Event) => void;
|
|
1496
|
-
onInvalid?: (event: Event) => void;
|
|
1497
|
-
onInvalidCapture?: (event: Event) => void;
|
|
1498
|
-
onBeforeToggle?: (event: Event) => void;
|
|
1499
|
-
onBeforeToggleCapture?: (event: Event) => void;
|
|
1500
|
-
onToggle?: (event: Event) => void;
|
|
1501
|
-
onToggleCapture?: (event: Event) => void;
|
|
1502
|
-
onLoad?: (event: Event) => void;
|
|
1503
|
-
onLoadCapture?: (event: Event) => void;
|
|
1504
|
-
onError?: (event: Event) => void;
|
|
1505
|
-
onErrorCapture?: (event: Event) => void;
|
|
1506
|
-
onKeyDown?: (event: KeyboardEvent) => void;
|
|
1507
|
-
onKeyDownCapture?: (event: KeyboardEvent) => void;
|
|
1508
|
-
onKeyPress?: (event: KeyboardEvent) => void;
|
|
1509
|
-
onKeyPressCapture?: (event: KeyboardEvent) => void;
|
|
1510
|
-
onKeyUp?: (event: KeyboardEvent) => void;
|
|
1511
|
-
onKeyUpCapture?: (event: KeyboardEvent) => void;
|
|
1512
|
-
onAuxClick?: (event: MouseEvent) => void;
|
|
1513
|
-
onClick?: (event: MouseEvent) => void;
|
|
1514
|
-
onClickCapture?: (event: MouseEvent) => void;
|
|
1515
|
-
onContextMenu?: (event: MouseEvent) => void;
|
|
1516
|
-
onContextMenuCapture?: (event: MouseEvent) => void;
|
|
1517
|
-
onDblClick?: (event: MouseEvent) => void;
|
|
1518
|
-
onDblClickCapture?: (event: MouseEvent) => void;
|
|
1519
|
-
onDrag?: (event: DragEvent) => void;
|
|
1520
|
-
onDragCapture?: (event: DragEvent) => void;
|
|
1521
|
-
onDragEnd?: (event: DragEvent) => void;
|
|
1522
|
-
onDragEndCapture?: (event: DragEvent) => void;
|
|
1523
|
-
onDragEnter?: (event: DragEvent) => void;
|
|
1524
|
-
onDragEnterCapture?: (event: DragEvent) => void;
|
|
1525
|
-
onDragExit?: (event: DragEvent) => void;
|
|
1526
|
-
onDragExitCapture?: (event: DragEvent) => void;
|
|
1527
|
-
onDragLeave?: (event: DragEvent) => void;
|
|
1528
|
-
onDragLeaveCapture?: (event: DragEvent) => void;
|
|
1529
|
-
onDragOver?: (event: DragEvent) => void;
|
|
1530
|
-
onDragOverCapture?: (event: DragEvent) => void;
|
|
1531
|
-
onDragStart?: (event: DragEvent) => void;
|
|
1532
|
-
onDragStartCapture?: (event: DragEvent) => void;
|
|
1533
|
-
onDrop?: (event: DragEvent) => void;
|
|
1534
|
-
onDropCapture?: (event: DragEvent) => void;
|
|
1535
|
-
onMouseDown?: (event: MouseEvent) => void;
|
|
1536
|
-
onMouseDownCapture?: (event: MouseEvent) => void;
|
|
1537
|
-
onMouseEnter?: (event: MouseEvent) => void;
|
|
1538
|
-
onMouseLeave?: (event: MouseEvent) => void;
|
|
1539
|
-
onMouseMove?: (event: MouseEvent) => void;
|
|
1540
|
-
onMouseMoveCapture?: (event: MouseEvent) => void;
|
|
1541
|
-
onMouseOut?: (event: MouseEvent) => void;
|
|
1542
|
-
onMouseOutCapture?: (event: MouseEvent) => void;
|
|
1543
|
-
onMouseOver?: (event: MouseEvent) => void;
|
|
1544
|
-
onMouseOverCapture?: (event: MouseEvent) => void;
|
|
1545
|
-
onMouseUp?: (event: MouseEvent) => void;
|
|
1546
|
-
onMouseUpCapture?: (event: MouseEvent) => void;
|
|
1547
|
-
onTouchCancel?: (event: TouchEvent) => void;
|
|
1548
|
-
onTouchCancelCapture?: (event: TouchEvent) => void;
|
|
1549
|
-
onTouchEnd?: (event: TouchEvent) => void;
|
|
1550
|
-
onTouchEndCapture?: (event: TouchEvent) => void;
|
|
1551
|
-
onTouchMove?: (event: TouchEvent) => void;
|
|
1552
|
-
onTouchMoveCapture?: (event: TouchEvent) => void;
|
|
1553
|
-
onTouchStart?: (event: TouchEvent) => void;
|
|
1554
|
-
onTouchStartCapture?: (event: TouchEvent) => void;
|
|
1555
|
-
onPointerDown?: (event: PointerEvent) => void;
|
|
1556
|
-
onPointerDownCapture?: (event: PointerEvent) => void;
|
|
1557
|
-
onPointerMove?: (event: PointerEvent) => void;
|
|
1558
|
-
onPointerMoveCapture?: (event: PointerEvent) => void;
|
|
1559
|
-
onPointerUp?: (event: PointerEvent) => void;
|
|
1560
|
-
onPointerUpCapture?: (event: PointerEvent) => void;
|
|
1561
|
-
onPointerCancel?: (event: PointerEvent) => void;
|
|
1562
|
-
onPointerCancelCapture?: (event: PointerEvent) => void;
|
|
1563
|
-
onPointerEnter?: (event: PointerEvent) => void;
|
|
1564
|
-
onPointerEnterCapture?: (event: PointerEvent) => void;
|
|
1565
|
-
onPointerLeave?: (event: PointerEvent) => void;
|
|
1566
|
-
onPointerLeaveCapture?: (event: PointerEvent) => void;
|
|
1567
|
-
onPointerOver?: (event: PointerEvent) => void;
|
|
1568
|
-
onPointerOverCapture?: (event: PointerEvent) => void;
|
|
1569
|
-
onPointerOut?: (event: PointerEvent) => void;
|
|
1570
|
-
onPointerOutCapture?: (event: PointerEvent) => void;
|
|
1571
|
-
onGotPointerCapture?: (event: PointerEvent) => void;
|
|
1572
|
-
onGotPointerCaptureCapture?: (event: PointerEvent) => void;
|
|
1573
|
-
onLostPointerCapture?: (event: PointerEvent) => void;
|
|
1574
|
-
onLostPointerCaptureCapture?: (event: PointerEvent) => void;
|
|
1575
|
-
onScroll?: (event: UIEvent) => void;
|
|
1576
|
-
onScrollCapture?: (event: UIEvent) => void;
|
|
1577
|
-
onWheel?: (event: WheelEvent) => void;
|
|
1578
|
-
onWheelCapture?: (event: WheelEvent) => void;
|
|
1579
|
-
onAnimationStart?: (event: AnimationEvent) => void;
|
|
1580
|
-
onAnimationStartCapture?: (event: AnimationEvent) => void;
|
|
1581
|
-
onAnimationEnd?: (event: AnimationEvent) => void;
|
|
1582
|
-
onAnimationEndCapture?: (event: AnimationEvent) => void;
|
|
1583
|
-
onAnimationIteration?: (event: AnimationEvent) => void;
|
|
1584
|
-
onAnimationIterationCapture?: (event: AnimationEvent) => void;
|
|
1585
|
-
onTransitionCancel?: (event: TransitionEvent) => void;
|
|
1586
|
-
onTransitionCancelCapture?: (event: TransitionEvent) => void;
|
|
1587
|
-
onTransitionEnd?: (event: TransitionEvent) => void;
|
|
1588
|
-
onTransitionEndCapture?: (event: TransitionEvent) => void;
|
|
1589
|
-
onTransitionRun?: (event: TransitionEvent) => void;
|
|
1590
|
-
onTransitionRunCapture?: (event: TransitionEvent) => void;
|
|
1591
|
-
onTransitionStart?: (event: TransitionEvent) => void;
|
|
1592
|
-
onTransitionStartCapture?: (event: TransitionEvent) => void;
|
|
1593
|
-
}
|
|
572
|
+
/**
|
|
573
|
+
* Values stored in SearchcraftStore.
|
|
574
|
+
*/
|
|
575
|
+
export interface SearchcraftStateValues {
|
|
576
|
+
adClientResponseItems: AdClientResponseItem[];
|
|
577
|
+
core: SearchcraftCore | undefined;
|
|
578
|
+
hotkey: string;
|
|
579
|
+
hotkeyModifier: "ctrl" | "meta" | "alt" | "option";
|
|
580
|
+
logger: Logger | undefined;
|
|
581
|
+
facetPathsForIndexFields: Record<string, FacetPathsForIndexField>;
|
|
582
|
+
isPopoverVisible: boolean;
|
|
583
|
+
isSearchInProgress: boolean;
|
|
584
|
+
rangeValueForIndexFields: Record<string, RangeValueForIndexField>;
|
|
585
|
+
searchMode: "fuzzy" | "exact";
|
|
586
|
+
searchClientResponseItems: SearchClientResponseItem[];
|
|
587
|
+
searchResponseTimeTaken: number | undefined;
|
|
588
|
+
searchResponseFacetPrime: FacetPrime | undefined;
|
|
589
|
+
searchResultsCount: number;
|
|
590
|
+
searchResultsPage: number;
|
|
591
|
+
searchResultsPerPage: number;
|
|
592
|
+
searchTerm: string;
|
|
593
|
+
sortType: "asc" | "desc";
|
|
1594
594
|
}
|
|
1595
|
-
export interface
|
|
1596
|
-
key?: string | number;
|
|
1597
|
-
ref?: (elm?: T) => void;
|
|
595
|
+
export interface SearchcraftState extends SearchcraftStateFunctions, SearchcraftStateValues {
|
|
1598
596
|
}
|
|
597
|
+
export declare const searchcraftStore: import("zustand").StoreApi<SearchcraftState>;
|
|
598
|
+
export declare function parseCustomStyles(styles: string | Record<string, string>): Record<string, string>;
|
|
599
|
+
export declare function serializeStyles(styles: Record<string, Record<string, string>>): string;
|
|
1599
600
|
export type SearchcraftSelectOption = {
|
|
1600
601
|
label: string;
|
|
1601
602
|
value: string | number;
|
|
1602
603
|
selected?: boolean;
|
|
1603
604
|
};
|
|
1604
|
-
|
|
605
|
+
export namespace Components {
|
|
1605
606
|
/**
|
|
1606
607
|
* An inline ad meant to be rendered in a list of search results.
|
|
1607
608
|
*/
|
|
@@ -1611,108 +612,8 @@ declare namespace Components {
|
|
|
1611
612
|
"adSource": SearchcraftAdSource;
|
|
1612
613
|
}
|
|
1613
614
|
/**
|
|
1614
|
-
* This web component
|
|
1615
|
-
* Once a query is submitted, the component formats and presents the result.
|
|
1616
|
-
* It is consumed within the `searchcraft-base-search-results` component.
|
|
1617
|
-
*/
|
|
1618
|
-
interface SearchcraftBaseSearchResult {
|
|
1619
|
-
/**
|
|
1620
|
-
* The relationship between the current document and the link for the button rendered when containerHref is not present.
|
|
1621
|
-
*/
|
|
1622
|
-
"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
1623
|
-
/**
|
|
1624
|
-
* Where to open the link for the button rendered when containerHref is not present.
|
|
1625
|
-
*/
|
|
1626
|
-
"buttonTarget": "_blank" | "_self" | "_top" | "_parent";
|
|
1627
|
-
/**
|
|
1628
|
-
* The relationship between the current document and the link for the containing element.
|
|
1629
|
-
*/
|
|
1630
|
-
"containerRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
1631
|
-
/**
|
|
1632
|
-
* Where to open the link for the containing element.
|
|
1633
|
-
*/
|
|
1634
|
-
"containerTarget": "_blank" | "_self" | "_top" | "_parent";
|
|
1635
|
-
/**
|
|
1636
|
-
* A custom styles object.
|
|
1637
|
-
*/
|
|
1638
|
-
"customStyles"?: string;
|
|
1639
|
-
/**
|
|
1640
|
-
* The position in the document. Used with the "document_clicked" measure event.
|
|
1641
|
-
*/
|
|
1642
|
-
"documentPosition": number;
|
|
1643
|
-
/**
|
|
1644
|
-
* The placement of the image.
|
|
1645
|
-
*/
|
|
1646
|
-
"imagePlacement": "left" | "right";
|
|
1647
|
-
"item"?: SearchClientResponseItem;
|
|
1648
|
-
"searchResultMappings"?: SearchResultMappings;
|
|
1649
|
-
}
|
|
1650
|
-
/**
|
|
1651
|
-
* This web component is responsible for displaying the results of a search query.
|
|
1652
|
-
* Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
1653
|
-
* ## Usage
|
|
1654
|
-
* ```html
|
|
1655
|
-
* <!-- index.html -->
|
|
1656
|
-
* <searchcraft-base-search-results
|
|
1657
|
-
* ad-interval="4"
|
|
1658
|
-
* place-ad-at-start="false"
|
|
1659
|
-
* result-image-placement="right"
|
|
1660
|
-
* />
|
|
1661
|
-
* ```
|
|
1662
|
-
* ```js
|
|
1663
|
-
* // index.js
|
|
1664
|
-
* const baseSearchResults = document.querySelector('searchcraft-base-search-results');
|
|
1665
|
-
* baseSearchResults.searchResultMappings = containerHref: {
|
|
1666
|
-
* fieldNames: [
|
|
1667
|
-
* {
|
|
1668
|
-
* fieldName: 'canonical_link',
|
|
1669
|
-
* dataType: 'text',
|
|
1670
|
-
* },
|
|
1671
|
-
* ],
|
|
1672
|
-
* };
|
|
1673
|
-
* baseSearchResults.addEventListener('noResults', () => {
|
|
1674
|
-
* console.log('No search results found');
|
|
1675
|
-
* });
|
|
1676
|
-
* ```
|
|
1677
|
-
*/
|
|
1678
|
-
interface SearchcraftBaseSearchResults {
|
|
1679
|
-
/**
|
|
1680
|
-
* The label for the button rendered when containerHref is not present for each result.
|
|
1681
|
-
*/
|
|
1682
|
-
"buttonLabel"?: string;
|
|
1683
|
-
/**
|
|
1684
|
-
* The relationship between the current document and the link for the button rendered when containerHref is not present for each result.
|
|
1685
|
-
*/
|
|
1686
|
-
"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
1687
|
-
/**
|
|
1688
|
-
* Where to open the link for the button rendered when containerHref is not present for each result.
|
|
1689
|
-
*/
|
|
1690
|
-
"buttonTarget": "_blank" | "_self" | "_top" | "_parent";
|
|
1691
|
-
/**
|
|
1692
|
-
* The relationship between the current document and the link for the containing element for each result.
|
|
1693
|
-
*/
|
|
1694
|
-
"containerRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
1695
|
-
/**
|
|
1696
|
-
* Where to open the link for the containing element for each result.
|
|
1697
|
-
*/
|
|
1698
|
-
"containerTarget": "_blank" | "_self" | "_top" | "_parent";
|
|
1699
|
-
/**
|
|
1700
|
-
* A custom styles object.
|
|
1701
|
-
*/
|
|
1702
|
-
"customStylesForResults"?: string | Record<string, Record<string, string>>;
|
|
1703
|
-
/**
|
|
1704
|
-
* The placement of the image for each result.
|
|
1705
|
-
*/
|
|
1706
|
-
"resultImagePlacement": "left" | "right";
|
|
1707
|
-
/**
|
|
1708
|
-
* Formats the content rendered for each result.
|
|
1709
|
-
*/
|
|
1710
|
-
"searchResultMappings"?: SearchResultMappings;
|
|
1711
|
-
}
|
|
1712
|
-
/**
|
|
1713
|
-
* This web component represents a button to be consumed within the `search-input-form` component.
|
|
615
|
+
* This web component represents a button.
|
|
1714
616
|
* It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
|
|
1715
|
-
* It is consumed within the `searchcraft-input-form` component.
|
|
1716
617
|
*/
|
|
1717
618
|
interface SearchcraftButton {
|
|
1718
619
|
/**
|
|
@@ -1746,23 +647,18 @@ declare namespace Components {
|
|
|
1746
647
|
}
|
|
1747
648
|
/**
|
|
1748
649
|
* This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
|
|
1749
|
-
*
|
|
1750
|
-
*
|
|
1751
|
-
*
|
|
1752
|
-
*
|
|
650
|
+
* @js-example ```html
|
|
651
|
+
* <searchcraft-error-message>
|
|
652
|
+
* No search results found for query
|
|
653
|
+
* </searchcraft-error-message>
|
|
1753
654
|
* ```
|
|
1754
655
|
*/
|
|
1755
656
|
interface SearchcraftErrorMessage {
|
|
1756
|
-
/**
|
|
1757
|
-
* The error message.
|
|
1758
|
-
*/
|
|
1759
|
-
"errorMessage"?: string;
|
|
1760
657
|
}
|
|
1761
658
|
/**
|
|
1762
659
|
* This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
|
|
1763
660
|
* It is consumed within the `searchcraft-filter-panel`.
|
|
1764
|
-
*
|
|
1765
|
-
* ```html
|
|
661
|
+
* @js-example ```html
|
|
1766
662
|
* <!-- index.html -->
|
|
1767
663
|
* <searchcraft-facet-list field-name="title" />
|
|
1768
664
|
* ```
|
|
@@ -1782,11 +678,29 @@ declare namespace Components {
|
|
|
1782
678
|
}
|
|
1783
679
|
/**
|
|
1784
680
|
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
|
|
1785
|
-
*
|
|
1786
|
-
*
|
|
681
|
+
* @react-import ```jsx
|
|
682
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
|
|
683
|
+
* ```
|
|
684
|
+
* @vue-import ```jsx
|
|
685
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
|
|
686
|
+
* ```
|
|
687
|
+
* @js-example ```html
|
|
1787
688
|
* <!-- index.html -->
|
|
1788
689
|
* <searchcraft-filter-panel />
|
|
1789
690
|
* ```
|
|
691
|
+
* ```js
|
|
692
|
+
* // index.js
|
|
693
|
+
* const filterPanel = document.querySelector('searchcraft-filter-panel');
|
|
694
|
+
* if (filterPanel) {
|
|
695
|
+
* filterPanel.items = [];
|
|
696
|
+
* }
|
|
697
|
+
* ```
|
|
698
|
+
* @react-example ```jsx
|
|
699
|
+
* <SearchcraftFilterPanel items={[]} />
|
|
700
|
+
* ```
|
|
701
|
+
* @vue-example ```jsx
|
|
702
|
+
* <SearchcraftFilterPanel :items="[]" />
|
|
703
|
+
* ```
|
|
1790
704
|
*/
|
|
1791
705
|
interface SearchcraftFilterPanel {
|
|
1792
706
|
/**
|
|
@@ -1797,21 +711,27 @@ declare namespace Components {
|
|
|
1797
711
|
/**
|
|
1798
712
|
* This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
|
|
1799
713
|
* It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
|
|
1800
|
-
*
|
|
1801
|
-
*
|
|
1802
|
-
* <!-- index.html -->
|
|
1803
|
-
* <searchcraft-input-form placeholder-value="Search here" />
|
|
714
|
+
* @react-import ```jsx
|
|
715
|
+
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
|
|
1804
716
|
* ```
|
|
1805
|
-
* ```
|
|
1806
|
-
*
|
|
1807
|
-
*
|
|
717
|
+
* @vue-import ```jsx
|
|
718
|
+
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
|
|
719
|
+
* ```
|
|
720
|
+
* @js-example ```html
|
|
721
|
+
* <searchcraft-input-form auto-search />
|
|
722
|
+
* ```
|
|
723
|
+
* @react-example ```jsx
|
|
724
|
+
* <SearchcraftInputForm autoSearch />
|
|
725
|
+
* ```
|
|
726
|
+
* @vue-example ```jsx
|
|
727
|
+
* <SearchcraftInputForm autoSearch />
|
|
1808
728
|
* ```
|
|
1809
729
|
*/
|
|
1810
730
|
interface SearchcraftInputForm {
|
|
1811
731
|
/**
|
|
1812
732
|
* Whether or not to automatically submit the search term when the input changes.
|
|
1813
733
|
*/
|
|
1814
|
-
"autoSearch"
|
|
734
|
+
"autoSearch"?: boolean;
|
|
1815
735
|
/**
|
|
1816
736
|
* The label for the submit button.
|
|
1817
737
|
*/
|
|
@@ -1819,12 +739,8 @@ declare namespace Components {
|
|
|
1819
739
|
/**
|
|
1820
740
|
* Where to place the search button.
|
|
1821
741
|
*/
|
|
1822
|
-
"buttonPlacement"
|
|
742
|
+
"buttonPlacement"?: "left" | "right" | "none";
|
|
1823
743
|
"core"?: SearchcraftCore;
|
|
1824
|
-
/**
|
|
1825
|
-
* A custom styles object to be applied to the input element.
|
|
1826
|
-
*/
|
|
1827
|
-
"customStyles": string | Record<string, string>;
|
|
1828
744
|
/**
|
|
1829
745
|
* The label rendered above the input.
|
|
1830
746
|
*/
|
|
@@ -1832,13 +748,11 @@ declare namespace Components {
|
|
|
1832
748
|
/**
|
|
1833
749
|
* The input element's placeholder value.
|
|
1834
750
|
*/
|
|
1835
|
-
"placeholderValue"
|
|
751
|
+
"placeholderValue"?: string;
|
|
1836
752
|
}
|
|
1837
753
|
/**
|
|
1838
754
|
* This web component serves as the input label for the searchcraft-input-form component.
|
|
1839
|
-
*
|
|
1840
|
-
* ```html
|
|
1841
|
-
* <!-- index.html -->
|
|
755
|
+
* @js-example ```html
|
|
1842
756
|
* <searchcraft-input-label label="Search" />
|
|
1843
757
|
* ```
|
|
1844
758
|
*/
|
|
@@ -1850,63 +764,121 @@ declare namespace Components {
|
|
|
1850
764
|
"label": string;
|
|
1851
765
|
}
|
|
1852
766
|
/**
|
|
1853
|
-
* This web component is designed to facilitate pagination of search results.
|
|
1854
|
-
*
|
|
1855
|
-
*
|
|
1856
|
-
* ```
|
|
1857
|
-
*
|
|
767
|
+
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
|
|
768
|
+
* @react-import ```jsx
|
|
769
|
+
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
|
|
770
|
+
* ```
|
|
771
|
+
* @vue-import ```jsx
|
|
772
|
+
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
|
|
773
|
+
* ```
|
|
774
|
+
* @js-example ```html
|
|
1858
775
|
* <searchcraft-pagination />
|
|
1859
776
|
* ```
|
|
777
|
+
* @react-example ```jsx
|
|
778
|
+
* <SearchcraftPagination />
|
|
779
|
+
* ```
|
|
780
|
+
* @vue-example ```jsx
|
|
781
|
+
* <SearchcraftPagination />
|
|
782
|
+
* ```
|
|
1860
783
|
*/
|
|
1861
784
|
interface SearchcraftPagination {
|
|
1862
|
-
/**
|
|
1863
|
-
* The custom styles object.
|
|
1864
|
-
*/
|
|
1865
|
-
"customStyles"?: string;
|
|
1866
785
|
}
|
|
1867
786
|
/**
|
|
1868
787
|
* Renders a button which, when clicked, turns on popover visibility.
|
|
788
|
+
* @react-import ```jsx
|
|
789
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
|
|
790
|
+
* ````
|
|
791
|
+
* @vue-import ```jsx
|
|
792
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
|
|
793
|
+
* ```
|
|
794
|
+
* @js-example ```html
|
|
795
|
+
* <!-- index.html -->
|
|
796
|
+
* <searchcraft-popover-button>
|
|
797
|
+
* Open popover
|
|
798
|
+
* </searchcraft-popover-button>
|
|
799
|
+
* ```
|
|
800
|
+
* ```js
|
|
801
|
+
* // index.js
|
|
802
|
+
* const popoverButton = document.querySelector('searchcraft-popover-button');
|
|
803
|
+
* popoverButton.template = (isPopoverVisible, { html }) => html`
|
|
804
|
+
* <span>Click me</span>
|
|
805
|
+
* `;
|
|
806
|
+
* ```
|
|
807
|
+
* @react-example ```jsx
|
|
808
|
+
* <SearchcraftPopoverButton
|
|
809
|
+
* template={(isPopoverVisible, { html }) => html`
|
|
810
|
+
* <span>Click me</span>
|
|
811
|
+
* `}
|
|
812
|
+
* >
|
|
813
|
+
* Open popover
|
|
814
|
+
* </SearchcraftPopoverButton>
|
|
815
|
+
* ```
|
|
816
|
+
* @vue-example ```jsx
|
|
817
|
+
* <SearchcraftPopoverButton
|
|
818
|
+
* :template={(isPopoverVisible, { html }) => html`
|
|
819
|
+
* <span>Click me</span>
|
|
820
|
+
* `}
|
|
821
|
+
* >
|
|
822
|
+
* Open popover
|
|
823
|
+
* </SearchcraftPopoverButton>
|
|
824
|
+
* ```
|
|
1869
825
|
*/
|
|
1870
826
|
interface SearchcraftPopoverButton {
|
|
827
|
+
/**
|
|
828
|
+
* A callback function responsible for rendering the button contents.
|
|
829
|
+
*/
|
|
830
|
+
"template"?: PopoverButtonTemplate;
|
|
831
|
+
/**
|
|
832
|
+
* The type of popover button to render.
|
|
833
|
+
*/
|
|
834
|
+
"type"?: "skeuomorphic";
|
|
835
|
+
}
|
|
836
|
+
/**
|
|
837
|
+
* Renders the footer for the searchcraft-popover-form.
|
|
838
|
+
*/
|
|
839
|
+
interface SearchcraftPopoverFooter {
|
|
1871
840
|
}
|
|
1872
841
|
/**
|
|
1873
842
|
* 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.
|
|
1874
|
-
*
|
|
1875
|
-
*
|
|
843
|
+
* @react-import ```jsx
|
|
844
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
|
|
845
|
+
* ```
|
|
846
|
+
* @vue-import ```jsx
|
|
847
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
|
|
848
|
+
* ```
|
|
849
|
+
* @js-example ```html
|
|
1876
850
|
* <!-- index.html -->
|
|
1877
|
-
* <searchcraft-popover-form type="
|
|
851
|
+
* <searchcraft-popover-form type="inline" />
|
|
1878
852
|
* ```
|
|
1879
853
|
* ```js
|
|
1880
854
|
* // index.js
|
|
1881
855
|
* const popoverForm = document.querySelector('searchcraft-popover-form');
|
|
1882
|
-
* popoverForm.popoverResultMappings = {
|
|
1883
|
-
*
|
|
1884
|
-
*
|
|
1885
|
-
*
|
|
1886
|
-
*
|
|
1887
|
-
*
|
|
1888
|
-
*
|
|
1889
|
-
* ],
|
|
1890
|
-
* };
|
|
856
|
+
* popoverForm.popoverResultMappings = {};
|
|
857
|
+
* ```
|
|
858
|
+
* @react-example ```jsx
|
|
859
|
+
* <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
|
|
860
|
+
* ```
|
|
861
|
+
* @vue-example ```jsx
|
|
862
|
+
* <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
|
|
1891
863
|
* ```
|
|
1892
864
|
*/
|
|
1893
865
|
interface SearchcraftPopoverForm {
|
|
1894
866
|
/**
|
|
1895
867
|
* The hotkey that activates the popover.
|
|
1896
868
|
*/
|
|
1897
|
-
"hotkey"
|
|
869
|
+
"hotkey"?: string;
|
|
1898
870
|
/**
|
|
1899
871
|
* The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
|
|
1900
872
|
*/
|
|
1901
|
-
"hotkeyModifier"
|
|
873
|
+
"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
|
|
1902
874
|
/**
|
|
1903
875
|
* Formats the content rendered for each result.
|
|
1904
876
|
*/
|
|
1905
877
|
"popoverResultMappings"?: PopoverResultMappings;
|
|
1906
878
|
/**
|
|
1907
|
-
* The type of popover form to render.
|
|
879
|
+
* 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.
|
|
1908
880
|
*/
|
|
1909
|
-
"type"
|
|
881
|
+
"type"?: "inline" | "fullscreen" | "modal";
|
|
1910
882
|
}
|
|
1911
883
|
/**
|
|
1912
884
|
* A single list item rendered in a searchcraft-popover-list-view.
|
|
@@ -1922,9 +894,7 @@ declare namespace Components {
|
|
|
1922
894
|
/**
|
|
1923
895
|
* This web component is designed to display a list of results within a popover interface.
|
|
1924
896
|
* It is consumed within the `searchcraft-popover-form` component.
|
|
1925
|
-
*
|
|
1926
|
-
* ```html
|
|
1927
|
-
* <!-- index.html -->
|
|
897
|
+
* @js-example ```html
|
|
1928
898
|
* <searchcraft-popover-list-view />
|
|
1929
899
|
* ```
|
|
1930
900
|
*/
|
|
@@ -1943,44 +913,129 @@ declare namespace Components {
|
|
|
1943
913
|
}
|
|
1944
914
|
/**
|
|
1945
915
|
* This web component is designed to display the number of results returned from a search query.
|
|
1946
|
-
*
|
|
1947
|
-
*
|
|
916
|
+
* @react-import ```jsx
|
|
917
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
|
|
918
|
+
* ```
|
|
919
|
+
* @vue-import ```jsx
|
|
920
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
|
|
921
|
+
* ```
|
|
922
|
+
* @js-example ```html
|
|
1948
923
|
* <!-- index.html -->
|
|
1949
|
-
* <script>
|
|
1950
|
-
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
1951
|
-
* resultsInfo.customFormatter = (range, count, responseTime) =>
|
|
1952
|
-
* `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
|
|
1953
|
-
* </script>
|
|
1954
924
|
* <searchcraft-results-info />
|
|
1955
925
|
* ```
|
|
926
|
+
* ```js
|
|
927
|
+
* // index.js
|
|
928
|
+
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
929
|
+
* resultsInfo.template = (info, { html }) => html`
|
|
930
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
931
|
+
* `;
|
|
932
|
+
* ```
|
|
933
|
+
* @react-example ```jsx
|
|
934
|
+
* <SearchcraftResultsInfo
|
|
935
|
+
* template={(info, { html }) => html`
|
|
936
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
937
|
+
* `}
|
|
938
|
+
* />
|
|
939
|
+
* ```
|
|
940
|
+
* @vue-example ```jsx
|
|
941
|
+
* <SearchcraftResultsInfo
|
|
942
|
+
* :template={(info, { html }) => html`
|
|
943
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
944
|
+
* `}
|
|
945
|
+
* />
|
|
946
|
+
* ```
|
|
1956
947
|
*/
|
|
1957
948
|
interface SearchcraftResultsInfo {
|
|
1958
949
|
/**
|
|
1959
|
-
*
|
|
1960
|
-
|
|
950
|
+
* A callback function responsible for rendering the results info.
|
|
951
|
+
*/
|
|
952
|
+
"template"?: ResultsInfoTemplate;
|
|
953
|
+
}
|
|
954
|
+
/**
|
|
955
|
+
* This web component is designed to display detailed information for a single search result. Once a query is submitted, the component formats and presents the result.
|
|
956
|
+
*/
|
|
957
|
+
interface SearchcraftSearchResult {
|
|
958
|
+
/**
|
|
959
|
+
* The position in the document. Used with the "document_clicked" measure event.
|
|
1961
960
|
*/
|
|
1962
|
-
"
|
|
1963
|
-
string,
|
|
1964
|
-
string
|
|
1965
|
-
], count: string, responseTime: string) => void;
|
|
961
|
+
"documentPosition": number;
|
|
1966
962
|
/**
|
|
1967
|
-
* The
|
|
963
|
+
* The index.
|
|
1968
964
|
*/
|
|
1969
|
-
"
|
|
965
|
+
"index": number;
|
|
966
|
+
"item"?: SearchClientResponseItem;
|
|
967
|
+
/**
|
|
968
|
+
* A callback function responsible for rendering a result.
|
|
969
|
+
*/
|
|
970
|
+
"template"?: SearchResultTemplate<SearchResultTemplateData>;
|
|
971
|
+
}
|
|
972
|
+
/**
|
|
973
|
+
* This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
974
|
+
* @react-import ```jsx
|
|
975
|
+
* import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
|
|
976
|
+
* ```
|
|
977
|
+
* @vue-import ```jsx
|
|
978
|
+
* import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
|
|
979
|
+
* ```
|
|
980
|
+
* @js-example ```html
|
|
981
|
+
* <!-- index.html -->
|
|
982
|
+
* <searchcraft-search-results
|
|
983
|
+
* ad-interval="4"
|
|
984
|
+
* place-ad-at-start="true"
|
|
985
|
+
* />
|
|
986
|
+
* ```
|
|
987
|
+
* ```js
|
|
988
|
+
* // index.js
|
|
989
|
+
* const searchResults = document.querySelector('searchcraft-search-results');
|
|
990
|
+
* searchResults.template = (item, index, { html }) => html`
|
|
991
|
+
* <h2>${item.title}</h2>
|
|
992
|
+
* `;
|
|
993
|
+
* ```
|
|
994
|
+
* @react-example ```jsx
|
|
995
|
+
* <SearchcraftSearchResults
|
|
996
|
+
* adInterval={4}
|
|
997
|
+
* placeAdAtState={true}
|
|
998
|
+
* template={(item, index, { html }) => html`
|
|
999
|
+
* <h2>${item.title}</h2>
|
|
1000
|
+
* `}
|
|
1001
|
+
* />
|
|
1002
|
+
* ```
|
|
1003
|
+
* @vue-example ```jsx
|
|
1004
|
+
* <SearchcraftSearchResults
|
|
1005
|
+
* adInterval={4}
|
|
1006
|
+
* placeAdAtState={true}
|
|
1007
|
+
* :template={(item, index, { html }) => html`
|
|
1008
|
+
* <h2>${item.title}</h2>
|
|
1009
|
+
* `}
|
|
1010
|
+
* />
|
|
1011
|
+
* ```
|
|
1012
|
+
*/
|
|
1013
|
+
interface SearchcraftSearchResults {
|
|
1014
|
+
/**
|
|
1015
|
+
* A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
|
|
1016
|
+
*/
|
|
1017
|
+
"template"?: SearchResultTemplate<SearchResultTemplateData>;
|
|
1970
1018
|
}
|
|
1971
1019
|
/**
|
|
1972
1020
|
* This web component is designed to choose the number of search results displayed.
|
|
1973
|
-
*
|
|
1974
|
-
*
|
|
1021
|
+
* @react-import ```jsx
|
|
1022
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
|
|
1023
|
+
* ```
|
|
1024
|
+
* @vue-import ```jsx
|
|
1025
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
|
|
1026
|
+
* ```
|
|
1027
|
+
* @js-example ```html
|
|
1975
1028
|
* <!-- index.html -->
|
|
1976
1029
|
* <searchcraft-search-results-per-page increment="20" />
|
|
1977
1030
|
* ```
|
|
1031
|
+
* @react-example ```jsx
|
|
1032
|
+
* <SearchcraftSearchResultsPerPage increment={20} />
|
|
1033
|
+
* ```
|
|
1034
|
+
* @vue-example ```jsx
|
|
1035
|
+
* <SearchcraftSearchResultsPerPage increment="20" />
|
|
1036
|
+
* ```
|
|
1978
1037
|
*/
|
|
1979
1038
|
interface SearchcraftSearchResultsPerPage {
|
|
1980
|
-
/**
|
|
1981
|
-
* The custom styles object.
|
|
1982
|
-
*/
|
|
1983
|
-
"customStyles"?: string;
|
|
1984
1039
|
/**
|
|
1985
1040
|
* The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
|
|
1986
1041
|
*/
|
|
@@ -1988,8 +1043,7 @@ declare namespace Components {
|
|
|
1988
1043
|
}
|
|
1989
1044
|
/**
|
|
1990
1045
|
* This web component is designed to allow users to select between a group of options.
|
|
1991
|
-
*
|
|
1992
|
-
* ```html
|
|
1046
|
+
* @js-example ```html
|
|
1993
1047
|
* <!-- index.html -->
|
|
1994
1048
|
* <searchcraft-select
|
|
1995
1049
|
* inputId="searchcraft-select"
|
|
@@ -2003,10 +1057,6 @@ declare namespace Components {
|
|
|
2003
1057
|
* The caption displayed below the select input.
|
|
2004
1058
|
*/
|
|
2005
1059
|
"caption"?: string;
|
|
2006
|
-
/**
|
|
2007
|
-
* A custom styles object.
|
|
2008
|
-
*/
|
|
2009
|
-
"customStyles"?: string;
|
|
2010
1060
|
/**
|
|
2011
1061
|
* Whether the select input is disabled.
|
|
2012
1062
|
*/
|
|
@@ -2033,9 +1083,7 @@ declare namespace Components {
|
|
|
2033
1083
|
"options": SearchcraftSelectOption[] | string;
|
|
2034
1084
|
}
|
|
2035
1085
|
/**
|
|
2036
|
-
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
|
|
2037
|
-
* The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2038
|
-
* It is consumed by the `searchcraft-filter-panel` component.
|
|
1086
|
+
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2039
1087
|
*/
|
|
2040
1088
|
interface SearchcraftSlider {
|
|
2041
1089
|
/**
|
|
@@ -2056,27 +1104,27 @@ declare namespace Components {
|
|
|
2056
1104
|
"min": number;
|
|
2057
1105
|
}
|
|
2058
1106
|
/**
|
|
2059
|
-
* This web component adds Searchcraft's built-in css theme to your page
|
|
2060
|
-
*
|
|
2061
|
-
*
|
|
2062
|
-
* ```
|
|
2063
|
-
*
|
|
2064
|
-
*
|
|
1107
|
+
* This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
|
|
1108
|
+
* @react-import ```jsx
|
|
1109
|
+
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
|
|
1110
|
+
* ```
|
|
1111
|
+
* @vue-import ```jsx
|
|
1112
|
+
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
|
|
1113
|
+
* ```
|
|
1114
|
+
* @js-example ```html
|
|
1115
|
+
* <searchcraft-theme />
|
|
1116
|
+
* ```
|
|
1117
|
+
* @react-example ```jsx
|
|
1118
|
+
* <SearchcraftTheme />
|
|
1119
|
+
* ```
|
|
1120
|
+
* @vue-example ```jsx
|
|
1121
|
+
* <SearchcraftTheme />
|
|
2065
1122
|
* ```
|
|
2066
1123
|
*/
|
|
2067
1124
|
interface SearchcraftTheme {
|
|
2068
|
-
/**
|
|
2069
|
-
* The custom theme configuration object.
|
|
2070
|
-
*/
|
|
2071
|
-
"customTheme"?: string;
|
|
2072
|
-
/**
|
|
2073
|
-
* The name of the theme.
|
|
2074
|
-
*/
|
|
2075
|
-
"theme"?: string;
|
|
2076
1125
|
}
|
|
2077
1126
|
/**
|
|
2078
1127
|
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
|
|
2079
|
-
* It is consumed within the `searchcraft-filter-panel` component.
|
|
2080
1128
|
*/
|
|
2081
1129
|
interface SearchcraftToggleButton {
|
|
2082
1130
|
/**
|
|
@@ -2123,58 +1171,12 @@ declare global {
|
|
|
2123
1171
|
prototype: HTMLSearchcraftAdElement;
|
|
2124
1172
|
new (): HTMLSearchcraftAdElement;
|
|
2125
1173
|
};
|
|
2126
|
-
/**
|
|
2127
|
-
* This web component is designed to display detailed information for a single search result.
|
|
2128
|
-
* Once a query is submitted, the component formats and presents the result.
|
|
2129
|
-
* It is consumed within the `searchcraft-base-search-results` component.
|
|
2130
|
-
*/
|
|
2131
|
-
interface HTMLSearchcraftBaseSearchResultElement extends Components.SearchcraftBaseSearchResult, HTMLStencilElement {
|
|
2132
|
-
}
|
|
2133
|
-
var HTMLSearchcraftBaseSearchResultElement: {
|
|
2134
|
-
prototype: HTMLSearchcraftBaseSearchResultElement;
|
|
2135
|
-
new (): HTMLSearchcraftBaseSearchResultElement;
|
|
2136
|
-
};
|
|
2137
|
-
/**
|
|
2138
|
-
* This web component is responsible for displaying the results of a search query.
|
|
2139
|
-
* Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
2140
|
-
* ## Usage
|
|
2141
|
-
* ```html
|
|
2142
|
-
* <!-- index.html -->
|
|
2143
|
-
* <searchcraft-base-search-results
|
|
2144
|
-
* ad-interval="4"
|
|
2145
|
-
* place-ad-at-start="false"
|
|
2146
|
-
* result-image-placement="right"
|
|
2147
|
-
* />
|
|
2148
|
-
* ```
|
|
2149
|
-
* ```js
|
|
2150
|
-
* // index.js
|
|
2151
|
-
* const baseSearchResults = document.querySelector('searchcraft-base-search-results');
|
|
2152
|
-
* baseSearchResults.searchResultMappings = containerHref: {
|
|
2153
|
-
* fieldNames: [
|
|
2154
|
-
* {
|
|
2155
|
-
* fieldName: 'canonical_link',
|
|
2156
|
-
* dataType: 'text',
|
|
2157
|
-
* },
|
|
2158
|
-
* ],
|
|
2159
|
-
* };
|
|
2160
|
-
* baseSearchResults.addEventListener('noResults', () => {
|
|
2161
|
-
* console.log('No search results found');
|
|
2162
|
-
* });
|
|
2163
|
-
* ```
|
|
2164
|
-
*/
|
|
2165
|
-
interface HTMLSearchcraftBaseSearchResultsElement extends Components.SearchcraftBaseSearchResults, HTMLStencilElement {
|
|
2166
|
-
}
|
|
2167
|
-
var HTMLSearchcraftBaseSearchResultsElement: {
|
|
2168
|
-
prototype: HTMLSearchcraftBaseSearchResultsElement;
|
|
2169
|
-
new (): HTMLSearchcraftBaseSearchResultsElement;
|
|
2170
|
-
};
|
|
2171
1174
|
interface HTMLSearchcraftButtonElementEventMap {
|
|
2172
1175
|
"buttonClick": void;
|
|
2173
1176
|
}
|
|
2174
1177
|
/**
|
|
2175
|
-
* This web component represents a button
|
|
1178
|
+
* This web component represents a button.
|
|
2176
1179
|
* It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
|
|
2177
|
-
* It is consumed within the `searchcraft-input-form` component.
|
|
2178
1180
|
*/
|
|
2179
1181
|
interface HTMLSearchcraftButtonElement extends Components.SearchcraftButton, HTMLStencilElement {
|
|
2180
1182
|
addEventListener<K extends keyof HTMLSearchcraftButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftButtonElement, ev: SearchcraftButtonCustomEvent<HTMLSearchcraftButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -2192,10 +1194,10 @@ declare global {
|
|
|
2192
1194
|
};
|
|
2193
1195
|
/**
|
|
2194
1196
|
* This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
|
|
2195
|
-
*
|
|
2196
|
-
*
|
|
2197
|
-
*
|
|
2198
|
-
*
|
|
1197
|
+
* @js-example ```html
|
|
1198
|
+
* <searchcraft-error-message>
|
|
1199
|
+
* No search results found for query
|
|
1200
|
+
* </searchcraft-error-message>
|
|
2199
1201
|
* ```
|
|
2200
1202
|
*/
|
|
2201
1203
|
interface HTMLSearchcraftErrorMessageElement extends Components.SearchcraftErrorMessage, HTMLStencilElement {
|
|
@@ -2212,8 +1214,7 @@ declare global {
|
|
|
2212
1214
|
/**
|
|
2213
1215
|
* This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
|
|
2214
1216
|
* It is consumed within the `searchcraft-filter-panel`.
|
|
2215
|
-
*
|
|
2216
|
-
* ```html
|
|
1217
|
+
* @js-example ```html
|
|
2217
1218
|
* <!-- index.html -->
|
|
2218
1219
|
* <searchcraft-facet-list field-name="title" />
|
|
2219
1220
|
* ```
|
|
@@ -2241,11 +1242,29 @@ declare global {
|
|
|
2241
1242
|
};
|
|
2242
1243
|
/**
|
|
2243
1244
|
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
|
|
2244
|
-
*
|
|
2245
|
-
*
|
|
1245
|
+
* @react-import ```jsx
|
|
1246
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
|
|
1247
|
+
* ```
|
|
1248
|
+
* @vue-import ```jsx
|
|
1249
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
|
|
1250
|
+
* ```
|
|
1251
|
+
* @js-example ```html
|
|
2246
1252
|
* <!-- index.html -->
|
|
2247
1253
|
* <searchcraft-filter-panel />
|
|
2248
1254
|
* ```
|
|
1255
|
+
* ```js
|
|
1256
|
+
* // index.js
|
|
1257
|
+
* const filterPanel = document.querySelector('searchcraft-filter-panel');
|
|
1258
|
+
* if (filterPanel) {
|
|
1259
|
+
* filterPanel.items = [];
|
|
1260
|
+
* }
|
|
1261
|
+
* ```
|
|
1262
|
+
* @react-example ```jsx
|
|
1263
|
+
* <SearchcraftFilterPanel items={[]} />
|
|
1264
|
+
* ```
|
|
1265
|
+
* @vue-example ```jsx
|
|
1266
|
+
* <SearchcraftFilterPanel :items="[]" />
|
|
1267
|
+
* ```
|
|
2249
1268
|
*/
|
|
2250
1269
|
interface HTMLSearchcraftFilterPanelElement extends Components.SearchcraftFilterPanel, HTMLStencilElement {
|
|
2251
1270
|
}
|
|
@@ -2261,14 +1280,20 @@ declare global {
|
|
|
2261
1280
|
/**
|
|
2262
1281
|
* This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
|
|
2263
1282
|
* It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
|
|
2264
|
-
*
|
|
2265
|
-
*
|
|
2266
|
-
* <!-- index.html -->
|
|
2267
|
-
* <searchcraft-input-form placeholder-value="Search here" />
|
|
1283
|
+
* @react-import ```jsx
|
|
1284
|
+
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
|
|
2268
1285
|
* ```
|
|
2269
|
-
* ```
|
|
2270
|
-
*
|
|
2271
|
-
*
|
|
1286
|
+
* @vue-import ```jsx
|
|
1287
|
+
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
|
|
1288
|
+
* ```
|
|
1289
|
+
* @js-example ```html
|
|
1290
|
+
* <searchcraft-input-form auto-search />
|
|
1291
|
+
* ```
|
|
1292
|
+
* @react-example ```jsx
|
|
1293
|
+
* <SearchcraftInputForm autoSearch />
|
|
1294
|
+
* ```
|
|
1295
|
+
* @vue-example ```jsx
|
|
1296
|
+
* <SearchcraftInputForm autoSearch />
|
|
2272
1297
|
* ```
|
|
2273
1298
|
*/
|
|
2274
1299
|
interface HTMLSearchcraftInputFormElement extends Components.SearchcraftInputForm, HTMLStencilElement {
|
|
@@ -2287,9 +1312,7 @@ declare global {
|
|
|
2287
1312
|
};
|
|
2288
1313
|
/**
|
|
2289
1314
|
* This web component serves as the input label for the searchcraft-input-form component.
|
|
2290
|
-
*
|
|
2291
|
-
* ```html
|
|
2292
|
-
* <!-- index.html -->
|
|
1315
|
+
* @js-example ```html
|
|
2293
1316
|
* <searchcraft-input-label label="Search" />
|
|
2294
1317
|
* ```
|
|
2295
1318
|
*/
|
|
@@ -2300,13 +1323,22 @@ declare global {
|
|
|
2300
1323
|
new (): HTMLSearchcraftInputLabelElement;
|
|
2301
1324
|
};
|
|
2302
1325
|
/**
|
|
2303
|
-
* This web component is designed to facilitate pagination of search results.
|
|
2304
|
-
*
|
|
2305
|
-
*
|
|
2306
|
-
* ```
|
|
2307
|
-
*
|
|
1326
|
+
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
|
|
1327
|
+
* @react-import ```jsx
|
|
1328
|
+
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
|
|
1329
|
+
* ```
|
|
1330
|
+
* @vue-import ```jsx
|
|
1331
|
+
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
|
|
1332
|
+
* ```
|
|
1333
|
+
* @js-example ```html
|
|
2308
1334
|
* <searchcraft-pagination />
|
|
2309
1335
|
* ```
|
|
1336
|
+
* @react-example ```jsx
|
|
1337
|
+
* <SearchcraftPagination />
|
|
1338
|
+
* ```
|
|
1339
|
+
* @vue-example ```jsx
|
|
1340
|
+
* <SearchcraftPagination />
|
|
1341
|
+
* ```
|
|
2310
1342
|
*/
|
|
2311
1343
|
interface HTMLSearchcraftPaginationElement extends Components.SearchcraftPagination, HTMLStencilElement {
|
|
2312
1344
|
}
|
|
@@ -2316,6 +1348,43 @@ declare global {
|
|
|
2316
1348
|
};
|
|
2317
1349
|
/**
|
|
2318
1350
|
* Renders a button which, when clicked, turns on popover visibility.
|
|
1351
|
+
* @react-import ```jsx
|
|
1352
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
|
|
1353
|
+
* ````
|
|
1354
|
+
* @vue-import ```jsx
|
|
1355
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
|
|
1356
|
+
* ```
|
|
1357
|
+
* @js-example ```html
|
|
1358
|
+
* <!-- index.html -->
|
|
1359
|
+
* <searchcraft-popover-button>
|
|
1360
|
+
* Open popover
|
|
1361
|
+
* </searchcraft-popover-button>
|
|
1362
|
+
* ```
|
|
1363
|
+
* ```js
|
|
1364
|
+
* // index.js
|
|
1365
|
+
* const popoverButton = document.querySelector('searchcraft-popover-button');
|
|
1366
|
+
* popoverButton.template = (isPopoverVisible, { html }) => html`
|
|
1367
|
+
* <span>Click me</span>
|
|
1368
|
+
* `;
|
|
1369
|
+
* ```
|
|
1370
|
+
* @react-example ```jsx
|
|
1371
|
+
* <SearchcraftPopoverButton
|
|
1372
|
+
* template={(isPopoverVisible, { html }) => html`
|
|
1373
|
+
* <span>Click me</span>
|
|
1374
|
+
* `}
|
|
1375
|
+
* >
|
|
1376
|
+
* Open popover
|
|
1377
|
+
* </SearchcraftPopoverButton>
|
|
1378
|
+
* ```
|
|
1379
|
+
* @vue-example ```jsx
|
|
1380
|
+
* <SearchcraftPopoverButton
|
|
1381
|
+
* :template={(isPopoverVisible, { html }) => html`
|
|
1382
|
+
* <span>Click me</span>
|
|
1383
|
+
* `}
|
|
1384
|
+
* >
|
|
1385
|
+
* Open popover
|
|
1386
|
+
* </SearchcraftPopoverButton>
|
|
1387
|
+
* ```
|
|
2319
1388
|
*/
|
|
2320
1389
|
interface HTMLSearchcraftPopoverButtonElement extends Components.SearchcraftPopoverButton, HTMLStencilElement {
|
|
2321
1390
|
}
|
|
@@ -2323,25 +1392,37 @@ declare global {
|
|
|
2323
1392
|
prototype: HTMLSearchcraftPopoverButtonElement;
|
|
2324
1393
|
new (): HTMLSearchcraftPopoverButtonElement;
|
|
2325
1394
|
};
|
|
1395
|
+
/**
|
|
1396
|
+
* Renders the footer for the searchcraft-popover-form.
|
|
1397
|
+
*/
|
|
1398
|
+
interface HTMLSearchcraftPopoverFooterElement extends Components.SearchcraftPopoverFooter, HTMLStencilElement {
|
|
1399
|
+
}
|
|
1400
|
+
var HTMLSearchcraftPopoverFooterElement: {
|
|
1401
|
+
prototype: HTMLSearchcraftPopoverFooterElement;
|
|
1402
|
+
new (): HTMLSearchcraftPopoverFooterElement;
|
|
1403
|
+
};
|
|
2326
1404
|
/**
|
|
2327
1405
|
* 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.
|
|
2328
|
-
*
|
|
2329
|
-
*
|
|
1406
|
+
* @react-import ```jsx
|
|
1407
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
|
|
1408
|
+
* ```
|
|
1409
|
+
* @vue-import ```jsx
|
|
1410
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
|
|
1411
|
+
* ```
|
|
1412
|
+
* @js-example ```html
|
|
2330
1413
|
* <!-- index.html -->
|
|
2331
|
-
* <searchcraft-popover-form type="
|
|
1414
|
+
* <searchcraft-popover-form type="inline" />
|
|
2332
1415
|
* ```
|
|
2333
1416
|
* ```js
|
|
2334
1417
|
* // index.js
|
|
2335
1418
|
* const popoverForm = document.querySelector('searchcraft-popover-form');
|
|
2336
|
-
* popoverForm.popoverResultMappings = {
|
|
2337
|
-
*
|
|
2338
|
-
*
|
|
2339
|
-
*
|
|
2340
|
-
*
|
|
2341
|
-
*
|
|
2342
|
-
*
|
|
2343
|
-
* ],
|
|
2344
|
-
* };
|
|
1419
|
+
* popoverForm.popoverResultMappings = {};
|
|
1420
|
+
* ```
|
|
1421
|
+
* @react-example ```jsx
|
|
1422
|
+
* <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
|
|
1423
|
+
* ```
|
|
1424
|
+
* @vue-example ```jsx
|
|
1425
|
+
* <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
|
|
2345
1426
|
* ```
|
|
2346
1427
|
*/
|
|
2347
1428
|
interface HTMLSearchcraftPopoverFormElement extends Components.SearchcraftPopoverForm, HTMLStencilElement {
|
|
@@ -2362,9 +1443,7 @@ declare global {
|
|
|
2362
1443
|
/**
|
|
2363
1444
|
* This web component is designed to display a list of results within a popover interface.
|
|
2364
1445
|
* It is consumed within the `searchcraft-popover-form` component.
|
|
2365
|
-
*
|
|
2366
|
-
* ```html
|
|
2367
|
-
* <!-- index.html -->
|
|
1446
|
+
* @js-example ```html
|
|
2368
1447
|
* <searchcraft-popover-list-view />
|
|
2369
1448
|
* ```
|
|
2370
1449
|
*/
|
|
@@ -2376,30 +1455,118 @@ declare global {
|
|
|
2376
1455
|
};
|
|
2377
1456
|
/**
|
|
2378
1457
|
* This web component is designed to display the number of results returned from a search query.
|
|
2379
|
-
*
|
|
2380
|
-
*
|
|
1458
|
+
* @react-import ```jsx
|
|
1459
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
|
|
1460
|
+
* ```
|
|
1461
|
+
* @vue-import ```jsx
|
|
1462
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
|
|
1463
|
+
* ```
|
|
1464
|
+
* @js-example ```html
|
|
1465
|
+
* <!-- index.html -->
|
|
1466
|
+
* <searchcraft-results-info />
|
|
1467
|
+
* ```
|
|
1468
|
+
* ```js
|
|
1469
|
+
* // index.js
|
|
1470
|
+
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
1471
|
+
* resultsInfo.template = (info, { html }) => html`
|
|
1472
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
1473
|
+
* `;
|
|
1474
|
+
* ```
|
|
1475
|
+
* @react-example ```jsx
|
|
1476
|
+
* <SearchcraftResultsInfo
|
|
1477
|
+
* template={(info, { html }) => html`
|
|
1478
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
1479
|
+
* `}
|
|
1480
|
+
* />
|
|
1481
|
+
* ```
|
|
1482
|
+
* @vue-example ```jsx
|
|
1483
|
+
* <SearchcraftResultsInfo
|
|
1484
|
+
* :template={(info, { html }) => html`
|
|
1485
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
1486
|
+
* `}
|
|
1487
|
+
* />
|
|
1488
|
+
* ```
|
|
1489
|
+
*/
|
|
1490
|
+
interface HTMLSearchcraftResultsInfoElement extends Components.SearchcraftResultsInfo, HTMLStencilElement {
|
|
1491
|
+
}
|
|
1492
|
+
var HTMLSearchcraftResultsInfoElement: {
|
|
1493
|
+
prototype: HTMLSearchcraftResultsInfoElement;
|
|
1494
|
+
new (): HTMLSearchcraftResultsInfoElement;
|
|
1495
|
+
};
|
|
1496
|
+
/**
|
|
1497
|
+
* This web component is designed to display detailed information for a single search result. Once a query is submitted, the component formats and presents the result.
|
|
1498
|
+
*/
|
|
1499
|
+
interface HTMLSearchcraftSearchResultElement extends Components.SearchcraftSearchResult, HTMLStencilElement {
|
|
1500
|
+
}
|
|
1501
|
+
var HTMLSearchcraftSearchResultElement: {
|
|
1502
|
+
prototype: HTMLSearchcraftSearchResultElement;
|
|
1503
|
+
new (): HTMLSearchcraftSearchResultElement;
|
|
1504
|
+
};
|
|
1505
|
+
/**
|
|
1506
|
+
* This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
1507
|
+
* @react-import ```jsx
|
|
1508
|
+
* import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
|
|
1509
|
+
* ```
|
|
1510
|
+
* @vue-import ```jsx
|
|
1511
|
+
* import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
|
|
1512
|
+
* ```
|
|
1513
|
+
* @js-example ```html
|
|
2381
1514
|
* <!-- index.html -->
|
|
2382
|
-
* <
|
|
2383
|
-
*
|
|
2384
|
-
*
|
|
2385
|
-
*
|
|
2386
|
-
*
|
|
2387
|
-
*
|
|
1515
|
+
* <searchcraft-search-results
|
|
1516
|
+
* ad-interval="4"
|
|
1517
|
+
* place-ad-at-start="true"
|
|
1518
|
+
* />
|
|
1519
|
+
* ```
|
|
1520
|
+
* ```js
|
|
1521
|
+
* // index.js
|
|
1522
|
+
* const searchResults = document.querySelector('searchcraft-search-results');
|
|
1523
|
+
* searchResults.template = (item, index, { html }) => html`
|
|
1524
|
+
* <h2>${item.title}</h2>
|
|
1525
|
+
* `;
|
|
1526
|
+
* ```
|
|
1527
|
+
* @react-example ```jsx
|
|
1528
|
+
* <SearchcraftSearchResults
|
|
1529
|
+
* adInterval={4}
|
|
1530
|
+
* placeAdAtState={true}
|
|
1531
|
+
* template={(item, index, { html }) => html`
|
|
1532
|
+
* <h2>${item.title}</h2>
|
|
1533
|
+
* `}
|
|
1534
|
+
* />
|
|
1535
|
+
* ```
|
|
1536
|
+
* @vue-example ```jsx
|
|
1537
|
+
* <SearchcraftSearchResults
|
|
1538
|
+
* adInterval={4}
|
|
1539
|
+
* placeAdAtState={true}
|
|
1540
|
+
* :template={(item, index, { html }) => html`
|
|
1541
|
+
* <h2>${item.title}</h2>
|
|
1542
|
+
* `}
|
|
1543
|
+
* />
|
|
2388
1544
|
* ```
|
|
2389
1545
|
*/
|
|
2390
|
-
interface
|
|
1546
|
+
interface HTMLSearchcraftSearchResultsElement extends Components.SearchcraftSearchResults, HTMLStencilElement {
|
|
2391
1547
|
}
|
|
2392
|
-
var
|
|
2393
|
-
prototype:
|
|
2394
|
-
new ():
|
|
1548
|
+
var HTMLSearchcraftSearchResultsElement: {
|
|
1549
|
+
prototype: HTMLSearchcraftSearchResultsElement;
|
|
1550
|
+
new (): HTMLSearchcraftSearchResultsElement;
|
|
2395
1551
|
};
|
|
2396
1552
|
/**
|
|
2397
1553
|
* This web component is designed to choose the number of search results displayed.
|
|
2398
|
-
*
|
|
2399
|
-
*
|
|
1554
|
+
* @react-import ```jsx
|
|
1555
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
|
|
1556
|
+
* ```
|
|
1557
|
+
* @vue-import ```jsx
|
|
1558
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
|
|
1559
|
+
* ```
|
|
1560
|
+
* @js-example ```html
|
|
2400
1561
|
* <!-- index.html -->
|
|
2401
1562
|
* <searchcraft-search-results-per-page increment="20" />
|
|
2402
1563
|
* ```
|
|
1564
|
+
* @react-example ```jsx
|
|
1565
|
+
* <SearchcraftSearchResultsPerPage increment={20} />
|
|
1566
|
+
* ```
|
|
1567
|
+
* @vue-example ```jsx
|
|
1568
|
+
* <SearchcraftSearchResultsPerPage increment="20" />
|
|
1569
|
+
* ```
|
|
2403
1570
|
*/
|
|
2404
1571
|
interface HTMLSearchcraftSearchResultsPerPageElement extends Components.SearchcraftSearchResultsPerPage, HTMLStencilElement {
|
|
2405
1572
|
}
|
|
@@ -2412,8 +1579,7 @@ declare global {
|
|
|
2412
1579
|
}
|
|
2413
1580
|
/**
|
|
2414
1581
|
* This web component is designed to allow users to select between a group of options.
|
|
2415
|
-
*
|
|
2416
|
-
* ```html
|
|
1582
|
+
* @js-example ```html
|
|
2417
1583
|
* <!-- index.html -->
|
|
2418
1584
|
* <searchcraft-select
|
|
2419
1585
|
* inputId="searchcraft-select"
|
|
@@ -2440,9 +1606,7 @@ declare global {
|
|
|
2440
1606
|
"rangeChanged": any;
|
|
2441
1607
|
}
|
|
2442
1608
|
/**
|
|
2443
|
-
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
|
|
2444
|
-
* The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2445
|
-
* It is consumed by the `searchcraft-filter-panel` component.
|
|
1609
|
+
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2446
1610
|
*/
|
|
2447
1611
|
interface HTMLSearchcraftSliderElement extends Components.SearchcraftSlider, HTMLStencilElement {
|
|
2448
1612
|
addEventListener<K extends keyof HTMLSearchcraftSliderElementEventMap>(type: K, listener: (this: HTMLSearchcraftSliderElement, ev: SearchcraftSliderCustomEvent<HTMLSearchcraftSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -2459,12 +1623,21 @@ declare global {
|
|
|
2459
1623
|
new (): HTMLSearchcraftSliderElement;
|
|
2460
1624
|
};
|
|
2461
1625
|
/**
|
|
2462
|
-
* This web component adds Searchcraft's built-in css theme to your page
|
|
2463
|
-
*
|
|
2464
|
-
*
|
|
2465
|
-
* ```
|
|
2466
|
-
*
|
|
2467
|
-
*
|
|
1626
|
+
* This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
|
|
1627
|
+
* @react-import ```jsx
|
|
1628
|
+
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
|
|
1629
|
+
* ```
|
|
1630
|
+
* @vue-import ```jsx
|
|
1631
|
+
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
|
|
1632
|
+
* ```
|
|
1633
|
+
* @js-example ```html
|
|
1634
|
+
* <searchcraft-theme />
|
|
1635
|
+
* ```
|
|
1636
|
+
* @react-example ```jsx
|
|
1637
|
+
* <SearchcraftTheme />
|
|
1638
|
+
* ```
|
|
1639
|
+
* @vue-example ```jsx
|
|
1640
|
+
* <SearchcraftTheme />
|
|
2468
1641
|
* ```
|
|
2469
1642
|
*/
|
|
2470
1643
|
interface HTMLSearchcraftThemeElement extends Components.SearchcraftTheme, HTMLStencilElement {
|
|
@@ -2478,7 +1651,6 @@ declare global {
|
|
|
2478
1651
|
}
|
|
2479
1652
|
/**
|
|
2480
1653
|
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
|
|
2481
|
-
* It is consumed within the `searchcraft-filter-panel` component.
|
|
2482
1654
|
*/
|
|
2483
1655
|
interface HTMLSearchcraftToggleButtonElement extends Components.SearchcraftToggleButton, HTMLStencilElement {
|
|
2484
1656
|
addEventListener<K extends keyof HTMLSearchcraftToggleButtonElementEventMap>(type: K, listener: (this: HTMLSearchcraftToggleButtonElement, ev: SearchcraftToggleButtonCustomEvent<HTMLSearchcraftToggleButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
|
|
@@ -2496,8 +1668,6 @@ declare global {
|
|
|
2496
1668
|
};
|
|
2497
1669
|
interface HTMLElementTagNameMap {
|
|
2498
1670
|
"searchcraft-ad": HTMLSearchcraftAdElement;
|
|
2499
|
-
"searchcraft-base-search-result": HTMLSearchcraftBaseSearchResultElement;
|
|
2500
|
-
"searchcraft-base-search-results": HTMLSearchcraftBaseSearchResultsElement;
|
|
2501
1671
|
"searchcraft-button": HTMLSearchcraftButtonElement;
|
|
2502
1672
|
"searchcraft-error-message": HTMLSearchcraftErrorMessageElement;
|
|
2503
1673
|
"searchcraft-facet-list": HTMLSearchcraftFacetListElement;
|
|
@@ -2506,10 +1676,13 @@ declare global {
|
|
|
2506
1676
|
"searchcraft-input-label": HTMLSearchcraftInputLabelElement;
|
|
2507
1677
|
"searchcraft-pagination": HTMLSearchcraftPaginationElement;
|
|
2508
1678
|
"searchcraft-popover-button": HTMLSearchcraftPopoverButtonElement;
|
|
1679
|
+
"searchcraft-popover-footer": HTMLSearchcraftPopoverFooterElement;
|
|
2509
1680
|
"searchcraft-popover-form": HTMLSearchcraftPopoverFormElement;
|
|
2510
1681
|
"searchcraft-popover-list-item": HTMLSearchcraftPopoverListItemElement;
|
|
2511
1682
|
"searchcraft-popover-list-view": HTMLSearchcraftPopoverListViewElement;
|
|
2512
1683
|
"searchcraft-results-info": HTMLSearchcraftResultsInfoElement;
|
|
1684
|
+
"searchcraft-search-result": HTMLSearchcraftSearchResultElement;
|
|
1685
|
+
"searchcraft-search-results": HTMLSearchcraftSearchResultsElement;
|
|
2513
1686
|
"searchcraft-search-results-per-page": HTMLSearchcraftSearchResultsPerPageElement;
|
|
2514
1687
|
"searchcraft-select": HTMLSearchcraftSelectElement;
|
|
2515
1688
|
"searchcraft-slider": HTMLSearchcraftSliderElement;
|
|
@@ -2527,108 +1700,8 @@ declare namespace LocalJSX {
|
|
|
2527
1700
|
"adSource"?: SearchcraftAdSource;
|
|
2528
1701
|
}
|
|
2529
1702
|
/**
|
|
2530
|
-
* This web component
|
|
2531
|
-
* Once a query is submitted, the component formats and presents the result.
|
|
2532
|
-
* It is consumed within the `searchcraft-base-search-results` component.
|
|
2533
|
-
*/
|
|
2534
|
-
interface SearchcraftBaseSearchResult {
|
|
2535
|
-
/**
|
|
2536
|
-
* The relationship between the current document and the link for the button rendered when containerHref is not present.
|
|
2537
|
-
*/
|
|
2538
|
-
"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
2539
|
-
/**
|
|
2540
|
-
* Where to open the link for the button rendered when containerHref is not present.
|
|
2541
|
-
*/
|
|
2542
|
-
"buttonTarget"?: "_blank" | "_self" | "_top" | "_parent";
|
|
2543
|
-
/**
|
|
2544
|
-
* The relationship between the current document and the link for the containing element.
|
|
2545
|
-
*/
|
|
2546
|
-
"containerRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
2547
|
-
/**
|
|
2548
|
-
* Where to open the link for the containing element.
|
|
2549
|
-
*/
|
|
2550
|
-
"containerTarget"?: "_blank" | "_self" | "_top" | "_parent";
|
|
2551
|
-
/**
|
|
2552
|
-
* A custom styles object.
|
|
2553
|
-
*/
|
|
2554
|
-
"customStyles"?: string;
|
|
2555
|
-
/**
|
|
2556
|
-
* The position in the document. Used with the "document_clicked" measure event.
|
|
2557
|
-
*/
|
|
2558
|
-
"documentPosition"?: number;
|
|
2559
|
-
/**
|
|
2560
|
-
* The placement of the image.
|
|
2561
|
-
*/
|
|
2562
|
-
"imagePlacement"?: "left" | "right";
|
|
2563
|
-
"item"?: SearchClientResponseItem;
|
|
2564
|
-
"searchResultMappings"?: SearchResultMappings;
|
|
2565
|
-
}
|
|
2566
|
-
/**
|
|
2567
|
-
* This web component is responsible for displaying the results of a search query.
|
|
2568
|
-
* Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
2569
|
-
* ## Usage
|
|
2570
|
-
* ```html
|
|
2571
|
-
* <!-- index.html -->
|
|
2572
|
-
* <searchcraft-base-search-results
|
|
2573
|
-
* ad-interval="4"
|
|
2574
|
-
* place-ad-at-start="false"
|
|
2575
|
-
* result-image-placement="right"
|
|
2576
|
-
* />
|
|
2577
|
-
* ```
|
|
2578
|
-
* ```js
|
|
2579
|
-
* // index.js
|
|
2580
|
-
* const baseSearchResults = document.querySelector('searchcraft-base-search-results');
|
|
2581
|
-
* baseSearchResults.searchResultMappings = containerHref: {
|
|
2582
|
-
* fieldNames: [
|
|
2583
|
-
* {
|
|
2584
|
-
* fieldName: 'canonical_link',
|
|
2585
|
-
* dataType: 'text',
|
|
2586
|
-
* },
|
|
2587
|
-
* ],
|
|
2588
|
-
* };
|
|
2589
|
-
* baseSearchResults.addEventListener('noResults', () => {
|
|
2590
|
-
* console.log('No search results found');
|
|
2591
|
-
* });
|
|
2592
|
-
* ```
|
|
2593
|
-
*/
|
|
2594
|
-
interface SearchcraftBaseSearchResults {
|
|
2595
|
-
/**
|
|
2596
|
-
* The label for the button rendered when containerHref is not present for each result.
|
|
2597
|
-
*/
|
|
2598
|
-
"buttonLabel"?: string;
|
|
2599
|
-
/**
|
|
2600
|
-
* The relationship between the current document and the link for the button rendered when containerHref is not present for each result.
|
|
2601
|
-
*/
|
|
2602
|
-
"buttonRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
2603
|
-
/**
|
|
2604
|
-
* Where to open the link for the button rendered when containerHref is not present for each result.
|
|
2605
|
-
*/
|
|
2606
|
-
"buttonTarget"?: "_blank" | "_self" | "_top" | "_parent";
|
|
2607
|
-
/**
|
|
2608
|
-
* The relationship between the current document and the link for the containing element for each result.
|
|
2609
|
-
*/
|
|
2610
|
-
"containerRel"?: "noreferrer" | "noopener" | "nofollow";
|
|
2611
|
-
/**
|
|
2612
|
-
* Where to open the link for the containing element for each result.
|
|
2613
|
-
*/
|
|
2614
|
-
"containerTarget"?: "_blank" | "_self" | "_top" | "_parent";
|
|
2615
|
-
/**
|
|
2616
|
-
* A custom styles object.
|
|
2617
|
-
*/
|
|
2618
|
-
"customStylesForResults"?: string | Record<string, Record<string, string>>;
|
|
2619
|
-
/**
|
|
2620
|
-
* The placement of the image for each result.
|
|
2621
|
-
*/
|
|
2622
|
-
"resultImagePlacement"?: "left" | "right";
|
|
2623
|
-
/**
|
|
2624
|
-
* Formats the content rendered for each result.
|
|
2625
|
-
*/
|
|
2626
|
-
"searchResultMappings"?: SearchResultMappings;
|
|
2627
|
-
}
|
|
2628
|
-
/**
|
|
2629
|
-
* This web component represents a button to be consumed within the `search-input-form` component.
|
|
1703
|
+
* This web component represents a button.
|
|
2630
1704
|
* It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
|
|
2631
|
-
* It is consumed within the `searchcraft-input-form` component.
|
|
2632
1705
|
*/
|
|
2633
1706
|
interface SearchcraftButton {
|
|
2634
1707
|
/**
|
|
@@ -2666,23 +1739,18 @@ declare namespace LocalJSX {
|
|
|
2666
1739
|
}
|
|
2667
1740
|
/**
|
|
2668
1741
|
* This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
|
|
2669
|
-
*
|
|
2670
|
-
*
|
|
2671
|
-
*
|
|
2672
|
-
*
|
|
1742
|
+
* @js-example ```html
|
|
1743
|
+
* <searchcraft-error-message>
|
|
1744
|
+
* No search results found for query
|
|
1745
|
+
* </searchcraft-error-message>
|
|
2673
1746
|
* ```
|
|
2674
1747
|
*/
|
|
2675
1748
|
interface SearchcraftErrorMessage {
|
|
2676
|
-
/**
|
|
2677
|
-
* The error message.
|
|
2678
|
-
*/
|
|
2679
|
-
"errorMessage"?: string;
|
|
2680
1749
|
}
|
|
2681
1750
|
/**
|
|
2682
1751
|
* This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
|
|
2683
1752
|
* It is consumed within the `searchcraft-filter-panel`.
|
|
2684
|
-
*
|
|
2685
|
-
* ```html
|
|
1753
|
+
* @js-example ```html
|
|
2686
1754
|
* <!-- index.html -->
|
|
2687
1755
|
* <searchcraft-facet-list field-name="title" />
|
|
2688
1756
|
* ```
|
|
@@ -2708,11 +1776,29 @@ declare namespace LocalJSX {
|
|
|
2708
1776
|
}
|
|
2709
1777
|
/**
|
|
2710
1778
|
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
|
|
2711
|
-
*
|
|
2712
|
-
*
|
|
1779
|
+
* @react-import ```jsx
|
|
1780
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
|
|
1781
|
+
* ```
|
|
1782
|
+
* @vue-import ```jsx
|
|
1783
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
|
|
1784
|
+
* ```
|
|
1785
|
+
* @js-example ```html
|
|
2713
1786
|
* <!-- index.html -->
|
|
2714
1787
|
* <searchcraft-filter-panel />
|
|
2715
1788
|
* ```
|
|
1789
|
+
* ```js
|
|
1790
|
+
* // index.js
|
|
1791
|
+
* const filterPanel = document.querySelector('searchcraft-filter-panel');
|
|
1792
|
+
* if (filterPanel) {
|
|
1793
|
+
* filterPanel.items = [];
|
|
1794
|
+
* }
|
|
1795
|
+
* ```
|
|
1796
|
+
* @react-example ```jsx
|
|
1797
|
+
* <SearchcraftFilterPanel items={[]} />
|
|
1798
|
+
* ```
|
|
1799
|
+
* @vue-example ```jsx
|
|
1800
|
+
* <SearchcraftFilterPanel :items="[]" />
|
|
1801
|
+
* ```
|
|
2716
1802
|
*/
|
|
2717
1803
|
interface SearchcraftFilterPanel {
|
|
2718
1804
|
/**
|
|
@@ -2723,14 +1809,20 @@ declare namespace LocalJSX {
|
|
|
2723
1809
|
/**
|
|
2724
1810
|
* This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
|
|
2725
1811
|
* It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
|
|
2726
|
-
*
|
|
2727
|
-
*
|
|
2728
|
-
* <!-- index.html -->
|
|
2729
|
-
* <searchcraft-input-form placeholder-value="Search here" />
|
|
1812
|
+
* @react-import ```jsx
|
|
1813
|
+
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
|
|
2730
1814
|
* ```
|
|
2731
|
-
* ```
|
|
2732
|
-
*
|
|
2733
|
-
*
|
|
1815
|
+
* @vue-import ```jsx
|
|
1816
|
+
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
|
|
1817
|
+
* ```
|
|
1818
|
+
* @js-example ```html
|
|
1819
|
+
* <searchcraft-input-form auto-search />
|
|
1820
|
+
* ```
|
|
1821
|
+
* @react-example ```jsx
|
|
1822
|
+
* <SearchcraftInputForm autoSearch />
|
|
1823
|
+
* ```
|
|
1824
|
+
* @vue-example ```jsx
|
|
1825
|
+
* <SearchcraftInputForm autoSearch />
|
|
2734
1826
|
* ```
|
|
2735
1827
|
*/
|
|
2736
1828
|
interface SearchcraftInputForm {
|
|
@@ -2747,10 +1839,6 @@ declare namespace LocalJSX {
|
|
|
2747
1839
|
*/
|
|
2748
1840
|
"buttonPlacement"?: "left" | "right" | "none";
|
|
2749
1841
|
"core"?: SearchcraftCore;
|
|
2750
|
-
/**
|
|
2751
|
-
* A custom styles object to be applied to the input element.
|
|
2752
|
-
*/
|
|
2753
|
-
"customStyles"?: string | Record<string, string>;
|
|
2754
1842
|
/**
|
|
2755
1843
|
* The label rendered above the input.
|
|
2756
1844
|
*/
|
|
@@ -2774,9 +1862,7 @@ declare namespace LocalJSX {
|
|
|
2774
1862
|
}
|
|
2775
1863
|
/**
|
|
2776
1864
|
* This web component serves as the input label for the searchcraft-input-form component.
|
|
2777
|
-
*
|
|
2778
|
-
* ```html
|
|
2779
|
-
* <!-- index.html -->
|
|
1865
|
+
* @js-example ```html
|
|
2780
1866
|
* <searchcraft-input-label label="Search" />
|
|
2781
1867
|
* ```
|
|
2782
1868
|
*/
|
|
@@ -2788,44 +1874,102 @@ declare namespace LocalJSX {
|
|
|
2788
1874
|
"label"?: string;
|
|
2789
1875
|
}
|
|
2790
1876
|
/**
|
|
2791
|
-
* This web component is designed to facilitate pagination of search results.
|
|
2792
|
-
*
|
|
2793
|
-
*
|
|
2794
|
-
* ```
|
|
2795
|
-
*
|
|
1877
|
+
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
|
|
1878
|
+
* @react-import ```jsx
|
|
1879
|
+
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
|
|
1880
|
+
* ```
|
|
1881
|
+
* @vue-import ```jsx
|
|
1882
|
+
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
|
|
1883
|
+
* ```
|
|
1884
|
+
* @js-example ```html
|
|
2796
1885
|
* <searchcraft-pagination />
|
|
2797
1886
|
* ```
|
|
1887
|
+
* @react-example ```jsx
|
|
1888
|
+
* <SearchcraftPagination />
|
|
1889
|
+
* ```
|
|
1890
|
+
* @vue-example ```jsx
|
|
1891
|
+
* <SearchcraftPagination />
|
|
1892
|
+
* ```
|
|
2798
1893
|
*/
|
|
2799
1894
|
interface SearchcraftPagination {
|
|
2800
|
-
/**
|
|
2801
|
-
* The custom styles object.
|
|
2802
|
-
*/
|
|
2803
|
-
"customStyles"?: string;
|
|
2804
1895
|
}
|
|
2805
1896
|
/**
|
|
2806
1897
|
* Renders a button which, when clicked, turns on popover visibility.
|
|
1898
|
+
* @react-import ```jsx
|
|
1899
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
|
|
1900
|
+
* ````
|
|
1901
|
+
* @vue-import ```jsx
|
|
1902
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
|
|
1903
|
+
* ```
|
|
1904
|
+
* @js-example ```html
|
|
1905
|
+
* <!-- index.html -->
|
|
1906
|
+
* <searchcraft-popover-button>
|
|
1907
|
+
* Open popover
|
|
1908
|
+
* </searchcraft-popover-button>
|
|
1909
|
+
* ```
|
|
1910
|
+
* ```js
|
|
1911
|
+
* // index.js
|
|
1912
|
+
* const popoverButton = document.querySelector('searchcraft-popover-button');
|
|
1913
|
+
* popoverButton.template = (isPopoverVisible, { html }) => html`
|
|
1914
|
+
* <span>Click me</span>
|
|
1915
|
+
* `;
|
|
1916
|
+
* ```
|
|
1917
|
+
* @react-example ```jsx
|
|
1918
|
+
* <SearchcraftPopoverButton
|
|
1919
|
+
* template={(isPopoverVisible, { html }) => html`
|
|
1920
|
+
* <span>Click me</span>
|
|
1921
|
+
* `}
|
|
1922
|
+
* >
|
|
1923
|
+
* Open popover
|
|
1924
|
+
* </SearchcraftPopoverButton>
|
|
1925
|
+
* ```
|
|
1926
|
+
* @vue-example ```jsx
|
|
1927
|
+
* <SearchcraftPopoverButton
|
|
1928
|
+
* :template={(isPopoverVisible, { html }) => html`
|
|
1929
|
+
* <span>Click me</span>
|
|
1930
|
+
* `}
|
|
1931
|
+
* >
|
|
1932
|
+
* Open popover
|
|
1933
|
+
* </SearchcraftPopoverButton>
|
|
1934
|
+
* ```
|
|
2807
1935
|
*/
|
|
2808
1936
|
interface SearchcraftPopoverButton {
|
|
1937
|
+
/**
|
|
1938
|
+
* A callback function responsible for rendering the button contents.
|
|
1939
|
+
*/
|
|
1940
|
+
"template"?: PopoverButtonTemplate;
|
|
1941
|
+
/**
|
|
1942
|
+
* The type of popover button to render.
|
|
1943
|
+
*/
|
|
1944
|
+
"type"?: "skeuomorphic";
|
|
1945
|
+
}
|
|
1946
|
+
/**
|
|
1947
|
+
* Renders the footer for the searchcraft-popover-form.
|
|
1948
|
+
*/
|
|
1949
|
+
interface SearchcraftPopoverFooter {
|
|
2809
1950
|
}
|
|
2810
1951
|
/**
|
|
2811
1952
|
* 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.
|
|
2812
|
-
*
|
|
2813
|
-
*
|
|
1953
|
+
* @react-import ```jsx
|
|
1954
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
|
|
1955
|
+
* ```
|
|
1956
|
+
* @vue-import ```jsx
|
|
1957
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
|
|
1958
|
+
* ```
|
|
1959
|
+
* @js-example ```html
|
|
2814
1960
|
* <!-- index.html -->
|
|
2815
|
-
* <searchcraft-popover-form type="
|
|
1961
|
+
* <searchcraft-popover-form type="inline" />
|
|
2816
1962
|
* ```
|
|
2817
1963
|
* ```js
|
|
2818
1964
|
* // index.js
|
|
2819
1965
|
* const popoverForm = document.querySelector('searchcraft-popover-form');
|
|
2820
|
-
* popoverForm.popoverResultMappings = {
|
|
2821
|
-
*
|
|
2822
|
-
*
|
|
2823
|
-
*
|
|
2824
|
-
*
|
|
2825
|
-
*
|
|
2826
|
-
*
|
|
2827
|
-
* ],
|
|
2828
|
-
* };
|
|
1966
|
+
* popoverForm.popoverResultMappings = {};
|
|
1967
|
+
* ```
|
|
1968
|
+
* @react-example ```jsx
|
|
1969
|
+
* <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
|
|
1970
|
+
* ```
|
|
1971
|
+
* @vue-example ```jsx
|
|
1972
|
+
* <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
|
|
2829
1973
|
* ```
|
|
2830
1974
|
*/
|
|
2831
1975
|
interface SearchcraftPopoverForm {
|
|
@@ -2842,7 +1986,7 @@ declare namespace LocalJSX {
|
|
|
2842
1986
|
*/
|
|
2843
1987
|
"popoverResultMappings"?: PopoverResultMappings;
|
|
2844
1988
|
/**
|
|
2845
|
-
* The type of popover form to render.
|
|
1989
|
+
* 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.
|
|
2846
1990
|
*/
|
|
2847
1991
|
"type"?: "inline" | "fullscreen" | "modal";
|
|
2848
1992
|
}
|
|
@@ -2860,9 +2004,7 @@ declare namespace LocalJSX {
|
|
|
2860
2004
|
/**
|
|
2861
2005
|
* This web component is designed to display a list of results within a popover interface.
|
|
2862
2006
|
* It is consumed within the `searchcraft-popover-form` component.
|
|
2863
|
-
*
|
|
2864
|
-
* ```html
|
|
2865
|
-
* <!-- index.html -->
|
|
2007
|
+
* @js-example ```html
|
|
2866
2008
|
* <searchcraft-popover-list-view />
|
|
2867
2009
|
* ```
|
|
2868
2010
|
*/
|
|
@@ -2881,44 +2023,129 @@ declare namespace LocalJSX {
|
|
|
2881
2023
|
}
|
|
2882
2024
|
/**
|
|
2883
2025
|
* This web component is designed to display the number of results returned from a search query.
|
|
2884
|
-
*
|
|
2885
|
-
*
|
|
2026
|
+
* @react-import ```jsx
|
|
2027
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
|
|
2028
|
+
* ```
|
|
2029
|
+
* @vue-import ```jsx
|
|
2030
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
|
|
2031
|
+
* ```
|
|
2032
|
+
* @js-example ```html
|
|
2886
2033
|
* <!-- index.html -->
|
|
2887
|
-
* <script>
|
|
2888
|
-
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
2889
|
-
* resultsInfo.customFormatter = (range, count, responseTime) =>
|
|
2890
|
-
* `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
|
|
2891
|
-
* </script>
|
|
2892
2034
|
* <searchcraft-results-info />
|
|
2893
2035
|
* ```
|
|
2036
|
+
* ```js
|
|
2037
|
+
* // index.js
|
|
2038
|
+
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
2039
|
+
* resultsInfo.template = (info, { html }) => html`
|
|
2040
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2041
|
+
* `;
|
|
2042
|
+
* ```
|
|
2043
|
+
* @react-example ```jsx
|
|
2044
|
+
* <SearchcraftResultsInfo
|
|
2045
|
+
* template={(info, { html }) => html`
|
|
2046
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2047
|
+
* `}
|
|
2048
|
+
* />
|
|
2049
|
+
* ```
|
|
2050
|
+
* @vue-example ```jsx
|
|
2051
|
+
* <SearchcraftResultsInfo
|
|
2052
|
+
* :template={(info, { html }) => html`
|
|
2053
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2054
|
+
* `}
|
|
2055
|
+
* />
|
|
2056
|
+
* ```
|
|
2894
2057
|
*/
|
|
2895
2058
|
interface SearchcraftResultsInfo {
|
|
2896
2059
|
/**
|
|
2897
|
-
*
|
|
2898
|
-
|
|
2060
|
+
* A callback function responsible for rendering the results info.
|
|
2061
|
+
*/
|
|
2062
|
+
"template"?: ResultsInfoTemplate;
|
|
2063
|
+
}
|
|
2064
|
+
/**
|
|
2065
|
+
* This web component is designed to display detailed information for a single search result. Once a query is submitted, the component formats and presents the result.
|
|
2066
|
+
*/
|
|
2067
|
+
interface SearchcraftSearchResult {
|
|
2068
|
+
/**
|
|
2069
|
+
* The position in the document. Used with the "document_clicked" measure event.
|
|
2070
|
+
*/
|
|
2071
|
+
"documentPosition"?: number;
|
|
2072
|
+
/**
|
|
2073
|
+
* The index.
|
|
2899
2074
|
*/
|
|
2900
|
-
"
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2075
|
+
"index": number;
|
|
2076
|
+
"item"?: SearchClientResponseItem;
|
|
2077
|
+
/**
|
|
2078
|
+
* A callback function responsible for rendering a result.
|
|
2079
|
+
*/
|
|
2080
|
+
"template"?: SearchResultTemplate<SearchResultTemplateData>;
|
|
2081
|
+
}
|
|
2082
|
+
/**
|
|
2083
|
+
* This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
2084
|
+
* @react-import ```jsx
|
|
2085
|
+
* import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
|
|
2086
|
+
* ```
|
|
2087
|
+
* @vue-import ```jsx
|
|
2088
|
+
* import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
|
|
2089
|
+
* ```
|
|
2090
|
+
* @js-example ```html
|
|
2091
|
+
* <!-- index.html -->
|
|
2092
|
+
* <searchcraft-search-results
|
|
2093
|
+
* ad-interval="4"
|
|
2094
|
+
* place-ad-at-start="true"
|
|
2095
|
+
* />
|
|
2096
|
+
* ```
|
|
2097
|
+
* ```js
|
|
2098
|
+
* // index.js
|
|
2099
|
+
* const searchResults = document.querySelector('searchcraft-search-results');
|
|
2100
|
+
* searchResults.template = (item, index, { html }) => html`
|
|
2101
|
+
* <h2>${item.title}</h2>
|
|
2102
|
+
* `;
|
|
2103
|
+
* ```
|
|
2104
|
+
* @react-example ```jsx
|
|
2105
|
+
* <SearchcraftSearchResults
|
|
2106
|
+
* adInterval={4}
|
|
2107
|
+
* placeAdAtState={true}
|
|
2108
|
+
* template={(item, index, { html }) => html`
|
|
2109
|
+
* <h2>${item.title}</h2>
|
|
2110
|
+
* `}
|
|
2111
|
+
* />
|
|
2112
|
+
* ```
|
|
2113
|
+
* @vue-example ```jsx
|
|
2114
|
+
* <SearchcraftSearchResults
|
|
2115
|
+
* adInterval={4}
|
|
2116
|
+
* placeAdAtState={true}
|
|
2117
|
+
* :template={(item, index, { html }) => html`
|
|
2118
|
+
* <h2>${item.title}</h2>
|
|
2119
|
+
* `}
|
|
2120
|
+
* />
|
|
2121
|
+
* ```
|
|
2122
|
+
*/
|
|
2123
|
+
interface SearchcraftSearchResults {
|
|
2904
2124
|
/**
|
|
2905
|
-
*
|
|
2125
|
+
* A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
|
|
2906
2126
|
*/
|
|
2907
|
-
"
|
|
2127
|
+
"template"?: SearchResultTemplate<SearchResultTemplateData>;
|
|
2908
2128
|
}
|
|
2909
2129
|
/**
|
|
2910
2130
|
* This web component is designed to choose the number of search results displayed.
|
|
2911
|
-
*
|
|
2912
|
-
*
|
|
2131
|
+
* @react-import ```jsx
|
|
2132
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
|
|
2133
|
+
* ```
|
|
2134
|
+
* @vue-import ```jsx
|
|
2135
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
|
|
2136
|
+
* ```
|
|
2137
|
+
* @js-example ```html
|
|
2913
2138
|
* <!-- index.html -->
|
|
2914
2139
|
* <searchcraft-search-results-per-page increment="20" />
|
|
2915
2140
|
* ```
|
|
2141
|
+
* @react-example ```jsx
|
|
2142
|
+
* <SearchcraftSearchResultsPerPage increment={20} />
|
|
2143
|
+
* ```
|
|
2144
|
+
* @vue-example ```jsx
|
|
2145
|
+
* <SearchcraftSearchResultsPerPage increment="20" />
|
|
2146
|
+
* ```
|
|
2916
2147
|
*/
|
|
2917
2148
|
interface SearchcraftSearchResultsPerPage {
|
|
2918
|
-
/**
|
|
2919
|
-
* The custom styles object.
|
|
2920
|
-
*/
|
|
2921
|
-
"customStyles"?: string;
|
|
2922
2149
|
/**
|
|
2923
2150
|
* The amount the options will increase (e.g. 20 = [20, 40, 60, 80, 100]). The base value is defined by the `searchResultsPerPage` option in the configuration.
|
|
2924
2151
|
*/
|
|
@@ -2926,8 +2153,7 @@ declare namespace LocalJSX {
|
|
|
2926
2153
|
}
|
|
2927
2154
|
/**
|
|
2928
2155
|
* This web component is designed to allow users to select between a group of options.
|
|
2929
|
-
*
|
|
2930
|
-
* ```html
|
|
2156
|
+
* @js-example ```html
|
|
2931
2157
|
* <!-- index.html -->
|
|
2932
2158
|
* <searchcraft-select
|
|
2933
2159
|
* inputId="searchcraft-select"
|
|
@@ -2941,10 +2167,6 @@ declare namespace LocalJSX {
|
|
|
2941
2167
|
* The caption displayed below the select input.
|
|
2942
2168
|
*/
|
|
2943
2169
|
"caption"?: string;
|
|
2944
|
-
/**
|
|
2945
|
-
* A custom styles object.
|
|
2946
|
-
*/
|
|
2947
|
-
"customStyles"?: string;
|
|
2948
2170
|
/**
|
|
2949
2171
|
* Whether the select input is disabled.
|
|
2950
2172
|
*/
|
|
@@ -2975,9 +2197,7 @@ declare namespace LocalJSX {
|
|
|
2975
2197
|
"options"?: SearchcraftSelectOption[] | string;
|
|
2976
2198
|
}
|
|
2977
2199
|
/**
|
|
2978
|
-
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
|
|
2979
|
-
* The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2980
|
-
* It is consumed by the `searchcraft-filter-panel` component.
|
|
2200
|
+
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
2981
2201
|
*/
|
|
2982
2202
|
interface SearchcraftSlider {
|
|
2983
2203
|
/**
|
|
@@ -3002,27 +2222,27 @@ declare namespace LocalJSX {
|
|
|
3002
2222
|
"onRangeChanged"?: (event: SearchcraftSliderCustomEvent<any>) => void;
|
|
3003
2223
|
}
|
|
3004
2224
|
/**
|
|
3005
|
-
* This web component adds Searchcraft's built-in css theme to your page
|
|
3006
|
-
*
|
|
3007
|
-
*
|
|
3008
|
-
* ```
|
|
3009
|
-
*
|
|
3010
|
-
*
|
|
2225
|
+
* This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
|
|
2226
|
+
* @react-import ```jsx
|
|
2227
|
+
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
|
|
2228
|
+
* ```
|
|
2229
|
+
* @vue-import ```jsx
|
|
2230
|
+
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
|
|
2231
|
+
* ```
|
|
2232
|
+
* @js-example ```html
|
|
2233
|
+
* <searchcraft-theme />
|
|
2234
|
+
* ```
|
|
2235
|
+
* @react-example ```jsx
|
|
2236
|
+
* <SearchcraftTheme />
|
|
2237
|
+
* ```
|
|
2238
|
+
* @vue-example ```jsx
|
|
2239
|
+
* <SearchcraftTheme />
|
|
3011
2240
|
* ```
|
|
3012
2241
|
*/
|
|
3013
2242
|
interface SearchcraftTheme {
|
|
3014
|
-
/**
|
|
3015
|
-
* The custom theme configuration object.
|
|
3016
|
-
*/
|
|
3017
|
-
"customTheme"?: string;
|
|
3018
|
-
/**
|
|
3019
|
-
* The name of the theme.
|
|
3020
|
-
*/
|
|
3021
|
-
"theme"?: string;
|
|
3022
2243
|
}
|
|
3023
2244
|
/**
|
|
3024
2245
|
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
|
|
3025
|
-
* It is consumed within the `searchcraft-filter-panel` component.
|
|
3026
2246
|
*/
|
|
3027
2247
|
interface SearchcraftToggleButton {
|
|
3028
2248
|
/**
|
|
@@ -3040,8 +2260,6 @@ declare namespace LocalJSX {
|
|
|
3040
2260
|
}
|
|
3041
2261
|
interface IntrinsicElements {
|
|
3042
2262
|
"searchcraft-ad": SearchcraftAd;
|
|
3043
|
-
"searchcraft-base-search-result": SearchcraftBaseSearchResult;
|
|
3044
|
-
"searchcraft-base-search-results": SearchcraftBaseSearchResults;
|
|
3045
2263
|
"searchcraft-button": SearchcraftButton;
|
|
3046
2264
|
"searchcraft-error-message": SearchcraftErrorMessage;
|
|
3047
2265
|
"searchcraft-facet-list": SearchcraftFacetList;
|
|
@@ -3050,10 +2268,13 @@ declare namespace LocalJSX {
|
|
|
3050
2268
|
"searchcraft-input-label": SearchcraftInputLabel;
|
|
3051
2269
|
"searchcraft-pagination": SearchcraftPagination;
|
|
3052
2270
|
"searchcraft-popover-button": SearchcraftPopoverButton;
|
|
2271
|
+
"searchcraft-popover-footer": SearchcraftPopoverFooter;
|
|
3053
2272
|
"searchcraft-popover-form": SearchcraftPopoverForm;
|
|
3054
2273
|
"searchcraft-popover-list-item": SearchcraftPopoverListItem;
|
|
3055
2274
|
"searchcraft-popover-list-view": SearchcraftPopoverListView;
|
|
3056
2275
|
"searchcraft-results-info": SearchcraftResultsInfo;
|
|
2276
|
+
"searchcraft-search-result": SearchcraftSearchResult;
|
|
2277
|
+
"searchcraft-search-results": SearchcraftSearchResults;
|
|
3057
2278
|
"searchcraft-search-results-per-page": SearchcraftSearchResultsPerPage;
|
|
3058
2279
|
"searchcraft-select": SearchcraftSelect;
|
|
3059
2280
|
"searchcraft-slider": SearchcraftSlider;
|
|
@@ -3069,60 +2290,23 @@ declare module "@stencil/core" {
|
|
|
3069
2290
|
*/
|
|
3070
2291
|
"searchcraft-ad": LocalJSX.SearchcraftAd & JSXBase.HTMLAttributes<HTMLSearchcraftAdElement>;
|
|
3071
2292
|
/**
|
|
3072
|
-
* This web component
|
|
3073
|
-
* Once a query is submitted, the component formats and presents the result.
|
|
3074
|
-
* It is consumed within the `searchcraft-base-search-results` component.
|
|
3075
|
-
*/
|
|
3076
|
-
"searchcraft-base-search-result": LocalJSX.SearchcraftBaseSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultElement>;
|
|
3077
|
-
/**
|
|
3078
|
-
* This web component is responsible for displaying the results of a search query.
|
|
3079
|
-
* Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
3080
|
-
* ## Usage
|
|
3081
|
-
* ```html
|
|
3082
|
-
* <!-- index.html -->
|
|
3083
|
-
* <searchcraft-base-search-results
|
|
3084
|
-
* ad-interval="4"
|
|
3085
|
-
* place-ad-at-start="false"
|
|
3086
|
-
* result-image-placement="right"
|
|
3087
|
-
* />
|
|
3088
|
-
* ```
|
|
3089
|
-
* ```js
|
|
3090
|
-
* // index.js
|
|
3091
|
-
* const baseSearchResults = document.querySelector('searchcraft-base-search-results');
|
|
3092
|
-
* baseSearchResults.searchResultMappings = containerHref: {
|
|
3093
|
-
* fieldNames: [
|
|
3094
|
-
* {
|
|
3095
|
-
* fieldName: 'canonical_link',
|
|
3096
|
-
* dataType: 'text',
|
|
3097
|
-
* },
|
|
3098
|
-
* ],
|
|
3099
|
-
* };
|
|
3100
|
-
* baseSearchResults.addEventListener('noResults', () => {
|
|
3101
|
-
* console.log('No search results found');
|
|
3102
|
-
* });
|
|
3103
|
-
* ```
|
|
3104
|
-
*/
|
|
3105
|
-
"searchcraft-base-search-results": LocalJSX.SearchcraftBaseSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftBaseSearchResultsElement>;
|
|
3106
|
-
/**
|
|
3107
|
-
* This web component represents a button to be consumed within the `search-input-form` component.
|
|
2293
|
+
* This web component represents a button.
|
|
3108
2294
|
* It provides a clear, interactive way for users to submit search queries or trigger actions in a search interface.
|
|
3109
|
-
* It is consumed within the `searchcraft-input-form` component.
|
|
3110
2295
|
*/
|
|
3111
2296
|
"searchcraft-button": LocalJSX.SearchcraftButton & JSXBase.HTMLAttributes<HTMLSearchcraftButtonElement>;
|
|
3112
2297
|
/**
|
|
3113
2298
|
* This web component is designed to display a user-friendly error message when a search query fails, providing clear feedback to users and enhancing their experience when an issue arises during the search process.
|
|
3114
|
-
*
|
|
3115
|
-
*
|
|
3116
|
-
*
|
|
3117
|
-
*
|
|
2299
|
+
* @js-example ```html
|
|
2300
|
+
* <searchcraft-error-message>
|
|
2301
|
+
* No search results found for query
|
|
2302
|
+
* </searchcraft-error-message>
|
|
3118
2303
|
* ```
|
|
3119
2304
|
*/
|
|
3120
2305
|
"searchcraft-error-message": LocalJSX.SearchcraftErrorMessage & JSXBase.HTMLAttributes<HTMLSearchcraftErrorMessageElement>;
|
|
3121
2306
|
/**
|
|
3122
2307
|
* This web component is designed to display facets in a search interface, allowing users to refine their search results by applying filters based on various attributes.
|
|
3123
2308
|
* It is consumed within the `searchcraft-filter-panel`.
|
|
3124
|
-
*
|
|
3125
|
-
* ```html
|
|
2309
|
+
* @js-example ```html
|
|
3126
2310
|
* <!-- index.html -->
|
|
3127
2311
|
* <searchcraft-facet-list field-name="title" />
|
|
3128
2312
|
* ```
|
|
@@ -3137,69 +2321,144 @@ declare module "@stencil/core" {
|
|
|
3137
2321
|
"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes<HTMLSearchcraftFacetListElement>;
|
|
3138
2322
|
/**
|
|
3139
2323
|
* This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
|
|
3140
|
-
*
|
|
3141
|
-
*
|
|
2324
|
+
* @react-import ```jsx
|
|
2325
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/react-sdk";
|
|
2326
|
+
* ```
|
|
2327
|
+
* @vue-import ```jsx
|
|
2328
|
+
* import { SearchcraftFilterPanel } from "@searchcraft/vue-sdk";
|
|
2329
|
+
* ```
|
|
2330
|
+
* @js-example ```html
|
|
3142
2331
|
* <!-- index.html -->
|
|
3143
2332
|
* <searchcraft-filter-panel />
|
|
3144
2333
|
* ```
|
|
2334
|
+
* ```js
|
|
2335
|
+
* // index.js
|
|
2336
|
+
* const filterPanel = document.querySelector('searchcraft-filter-panel');
|
|
2337
|
+
* if (filterPanel) {
|
|
2338
|
+
* filterPanel.items = [];
|
|
2339
|
+
* }
|
|
2340
|
+
* ```
|
|
2341
|
+
* @react-example ```jsx
|
|
2342
|
+
* <SearchcraftFilterPanel items={[]} />
|
|
2343
|
+
* ```
|
|
2344
|
+
* @vue-example ```jsx
|
|
2345
|
+
* <SearchcraftFilterPanel :items="[]" />
|
|
2346
|
+
* ```
|
|
3145
2347
|
*/
|
|
3146
2348
|
"searchcraft-filter-panel": LocalJSX.SearchcraftFilterPanel & JSXBase.HTMLAttributes<HTMLSearchcraftFilterPanelElement>;
|
|
3147
2349
|
/**
|
|
3148
2350
|
* This web component provides a user-friendly interface for querying an indexed dataset, enabling users to easily search large collections of data.
|
|
3149
2351
|
* It abstracts the complexities of index-based searching, making it accessible to users of all technical levels.
|
|
3150
|
-
*
|
|
3151
|
-
*
|
|
3152
|
-
* <!-- index.html -->
|
|
3153
|
-
* <searchcraft-input-form placeholder-value="Search here" />
|
|
2352
|
+
* @react-import ```jsx
|
|
2353
|
+
* import { SearchcraftInputForm } from "@searchcraft/react-sdk";
|
|
3154
2354
|
* ```
|
|
3155
|
-
* ```
|
|
3156
|
-
*
|
|
3157
|
-
*
|
|
2355
|
+
* @vue-import ```jsx
|
|
2356
|
+
* import { SearchcraftInputForm } from "@searchcraft/vue-sdk";
|
|
2357
|
+
* ```
|
|
2358
|
+
* @js-example ```html
|
|
2359
|
+
* <searchcraft-input-form auto-search />
|
|
2360
|
+
* ```
|
|
2361
|
+
* @react-example ```jsx
|
|
2362
|
+
* <SearchcraftInputForm autoSearch />
|
|
2363
|
+
* ```
|
|
2364
|
+
* @vue-example ```jsx
|
|
2365
|
+
* <SearchcraftInputForm autoSearch />
|
|
3158
2366
|
* ```
|
|
3159
2367
|
*/
|
|
3160
2368
|
"searchcraft-input-form": LocalJSX.SearchcraftInputForm & JSXBase.HTMLAttributes<HTMLSearchcraftInputFormElement>;
|
|
3161
2369
|
/**
|
|
3162
2370
|
* This web component serves as the input label for the searchcraft-input-form component.
|
|
3163
|
-
*
|
|
3164
|
-
* ```html
|
|
3165
|
-
* <!-- index.html -->
|
|
2371
|
+
* @js-example ```html
|
|
3166
2372
|
* <searchcraft-input-label label="Search" />
|
|
3167
2373
|
* ```
|
|
3168
2374
|
*/
|
|
3169
2375
|
"searchcraft-input-label": LocalJSX.SearchcraftInputLabel & JSXBase.HTMLAttributes<HTMLSearchcraftInputLabelElement>;
|
|
3170
2376
|
/**
|
|
3171
|
-
* This web component is designed to facilitate pagination of search results.
|
|
3172
|
-
*
|
|
3173
|
-
*
|
|
3174
|
-
* ```
|
|
3175
|
-
*
|
|
2377
|
+
* This web component is designed to facilitate pagination of search results. Once a query is submitted, calculates the number for pages.
|
|
2378
|
+
* @react-import ```jsx
|
|
2379
|
+
* import { SearchcraftPagination } from "@searchcraft/react-sdk";
|
|
2380
|
+
* ```
|
|
2381
|
+
* @vue-import ```jsx
|
|
2382
|
+
* import { SearchcraftPagination } from "@searchcraft/vue-sdk";
|
|
2383
|
+
* ```
|
|
2384
|
+
* @js-example ```html
|
|
3176
2385
|
* <searchcraft-pagination />
|
|
3177
2386
|
* ```
|
|
2387
|
+
* @react-example ```jsx
|
|
2388
|
+
* <SearchcraftPagination />
|
|
2389
|
+
* ```
|
|
2390
|
+
* @vue-example ```jsx
|
|
2391
|
+
* <SearchcraftPagination />
|
|
2392
|
+
* ```
|
|
3178
2393
|
*/
|
|
3179
2394
|
"searchcraft-pagination": LocalJSX.SearchcraftPagination & JSXBase.HTMLAttributes<HTMLSearchcraftPaginationElement>;
|
|
3180
2395
|
/**
|
|
3181
2396
|
* Renders a button which, when clicked, turns on popover visibility.
|
|
2397
|
+
* @react-import ```jsx
|
|
2398
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/react-sdk";
|
|
2399
|
+
* ````
|
|
2400
|
+
* @vue-import ```jsx
|
|
2401
|
+
* import { SearchcraftPopoverButton } from "@searchcraft/vue-sdk";
|
|
2402
|
+
* ```
|
|
2403
|
+
* @js-example ```html
|
|
2404
|
+
* <!-- index.html -->
|
|
2405
|
+
* <searchcraft-popover-button>
|
|
2406
|
+
* Open popover
|
|
2407
|
+
* </searchcraft-popover-button>
|
|
2408
|
+
* ```
|
|
2409
|
+
* ```js
|
|
2410
|
+
* // index.js
|
|
2411
|
+
* const popoverButton = document.querySelector('searchcraft-popover-button');
|
|
2412
|
+
* popoverButton.template = (isPopoverVisible, { html }) => html`
|
|
2413
|
+
* <span>Click me</span>
|
|
2414
|
+
* `;
|
|
2415
|
+
* ```
|
|
2416
|
+
* @react-example ```jsx
|
|
2417
|
+
* <SearchcraftPopoverButton
|
|
2418
|
+
* template={(isPopoverVisible, { html }) => html`
|
|
2419
|
+
* <span>Click me</span>
|
|
2420
|
+
* `}
|
|
2421
|
+
* >
|
|
2422
|
+
* Open popover
|
|
2423
|
+
* </SearchcraftPopoverButton>
|
|
2424
|
+
* ```
|
|
2425
|
+
* @vue-example ```jsx
|
|
2426
|
+
* <SearchcraftPopoverButton
|
|
2427
|
+
* :template={(isPopoverVisible, { html }) => html`
|
|
2428
|
+
* <span>Click me</span>
|
|
2429
|
+
* `}
|
|
2430
|
+
* >
|
|
2431
|
+
* Open popover
|
|
2432
|
+
* </SearchcraftPopoverButton>
|
|
2433
|
+
* ```
|
|
3182
2434
|
*/
|
|
3183
2435
|
"searchcraft-popover-button": LocalJSX.SearchcraftPopoverButton & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverButtonElement>;
|
|
2436
|
+
/**
|
|
2437
|
+
* Renders the footer for the searchcraft-popover-form.
|
|
2438
|
+
*/
|
|
2439
|
+
"searchcraft-popover-footer": LocalJSX.SearchcraftPopoverFooter & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFooterElement>;
|
|
3184
2440
|
/**
|
|
3185
2441
|
* 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.
|
|
3186
|
-
*
|
|
3187
|
-
*
|
|
2442
|
+
* @react-import ```jsx
|
|
2443
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/react-sdk";
|
|
2444
|
+
* ```
|
|
2445
|
+
* @vue-import ```jsx
|
|
2446
|
+
* import { SearchcraftPopoverForm } from "@searchcraft/vue-sdk";
|
|
2447
|
+
* ```
|
|
2448
|
+
* @js-example ```html
|
|
3188
2449
|
* <!-- index.html -->
|
|
3189
|
-
* <searchcraft-popover-form type="
|
|
2450
|
+
* <searchcraft-popover-form type="inline" />
|
|
3190
2451
|
* ```
|
|
3191
2452
|
* ```js
|
|
3192
2453
|
* // index.js
|
|
3193
2454
|
* const popoverForm = document.querySelector('searchcraft-popover-form');
|
|
3194
|
-
* popoverForm.popoverResultMappings = {
|
|
3195
|
-
*
|
|
3196
|
-
*
|
|
3197
|
-
*
|
|
3198
|
-
*
|
|
3199
|
-
*
|
|
3200
|
-
*
|
|
3201
|
-
* ],
|
|
3202
|
-
* };
|
|
2455
|
+
* popoverForm.popoverResultMappings = {};
|
|
2456
|
+
* ```
|
|
2457
|
+
* @react-example ```jsx
|
|
2458
|
+
* <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
|
|
2459
|
+
* ```
|
|
2460
|
+
* @vue-example ```jsx
|
|
2461
|
+
* <SearchcraftPopoverForm type="inline" :popoverResultMappings="[]"" />
|
|
3203
2462
|
* ```
|
|
3204
2463
|
*/
|
|
3205
2464
|
"searchcraft-popover-form": LocalJSX.SearchcraftPopoverForm & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverFormElement>;
|
|
@@ -3210,40 +2469,115 @@ declare module "@stencil/core" {
|
|
|
3210
2469
|
/**
|
|
3211
2470
|
* This web component is designed to display a list of results within a popover interface.
|
|
3212
2471
|
* It is consumed within the `searchcraft-popover-form` component.
|
|
3213
|
-
*
|
|
3214
|
-
* ```html
|
|
3215
|
-
* <!-- index.html -->
|
|
2472
|
+
* @js-example ```html
|
|
3216
2473
|
* <searchcraft-popover-list-view />
|
|
3217
2474
|
* ```
|
|
3218
2475
|
*/
|
|
3219
2476
|
"searchcraft-popover-list-view": LocalJSX.SearchcraftPopoverListView & JSXBase.HTMLAttributes<HTMLSearchcraftPopoverListViewElement>;
|
|
3220
2477
|
/**
|
|
3221
2478
|
* This web component is designed to display the number of results returned from a search query.
|
|
3222
|
-
*
|
|
3223
|
-
*
|
|
2479
|
+
* @react-import ```jsx
|
|
2480
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/react-sdk";
|
|
2481
|
+
* ```
|
|
2482
|
+
* @vue-import ```jsx
|
|
2483
|
+
* import { SearchcraftResultsInfo } from "@searchcraft/vue-sdk";
|
|
2484
|
+
* ```
|
|
2485
|
+
* @js-example ```html
|
|
3224
2486
|
* <!-- index.html -->
|
|
3225
|
-
* <script>
|
|
3226
|
-
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
3227
|
-
* resultsInfo.customFormatter = (range, count, responseTime) =>
|
|
3228
|
-
* `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
|
|
3229
|
-
* </script>
|
|
3230
2487
|
* <searchcraft-results-info />
|
|
3231
2488
|
* ```
|
|
2489
|
+
* ```js
|
|
2490
|
+
* // index.js
|
|
2491
|
+
* const resultsInfo = document.querySelector('searchcraft-results-info');
|
|
2492
|
+
* resultsInfo.template = (info, { html }) => html`
|
|
2493
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2494
|
+
* `;
|
|
2495
|
+
* ```
|
|
2496
|
+
* @react-example ```jsx
|
|
2497
|
+
* <SearchcraftResultsInfo
|
|
2498
|
+
* template={(info, { html }) => html`
|
|
2499
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2500
|
+
* `}
|
|
2501
|
+
* />
|
|
2502
|
+
* ```
|
|
2503
|
+
* @vue-example ```jsx
|
|
2504
|
+
* <SearchcraftResultsInfo
|
|
2505
|
+
* :template={(info, { html }) => html`
|
|
2506
|
+
* ${info.range[0]}-${info.range[1]} of ${info.count} results in ${info.responseTime}ms
|
|
2507
|
+
* `}
|
|
2508
|
+
* />
|
|
2509
|
+
* ```
|
|
3232
2510
|
*/
|
|
3233
2511
|
"searchcraft-results-info": LocalJSX.SearchcraftResultsInfo & JSXBase.HTMLAttributes<HTMLSearchcraftResultsInfoElement>;
|
|
2512
|
+
/**
|
|
2513
|
+
* This web component is designed to display detailed information for a single search result. Once a query is submitted, the component formats and presents the result.
|
|
2514
|
+
*/
|
|
2515
|
+
"searchcraft-search-result": LocalJSX.SearchcraftSearchResult & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultElement>;
|
|
2516
|
+
/**
|
|
2517
|
+
* This web component is responsible for displaying the results of a search query. Once a query is submitted, the component formats and presents an ordered list of the results.
|
|
2518
|
+
* @react-import ```jsx
|
|
2519
|
+
* import { SearchcraftSearchResults } from "@searchcraft/react-sdk";
|
|
2520
|
+
* ```
|
|
2521
|
+
* @vue-import ```jsx
|
|
2522
|
+
* import { SearchcraftSearchResults } from "@searchcraft/vue-sdk";
|
|
2523
|
+
* ```
|
|
2524
|
+
* @js-example ```html
|
|
2525
|
+
* <!-- index.html -->
|
|
2526
|
+
* <searchcraft-search-results
|
|
2527
|
+
* ad-interval="4"
|
|
2528
|
+
* place-ad-at-start="true"
|
|
2529
|
+
* />
|
|
2530
|
+
* ```
|
|
2531
|
+
* ```js
|
|
2532
|
+
* // index.js
|
|
2533
|
+
* const searchResults = document.querySelector('searchcraft-search-results');
|
|
2534
|
+
* searchResults.template = (item, index, { html }) => html`
|
|
2535
|
+
* <h2>${item.title}</h2>
|
|
2536
|
+
* `;
|
|
2537
|
+
* ```
|
|
2538
|
+
* @react-example ```jsx
|
|
2539
|
+
* <SearchcraftSearchResults
|
|
2540
|
+
* adInterval={4}
|
|
2541
|
+
* placeAdAtState={true}
|
|
2542
|
+
* template={(item, index, { html }) => html`
|
|
2543
|
+
* <h2>${item.title}</h2>
|
|
2544
|
+
* `}
|
|
2545
|
+
* />
|
|
2546
|
+
* ```
|
|
2547
|
+
* @vue-example ```jsx
|
|
2548
|
+
* <SearchcraftSearchResults
|
|
2549
|
+
* adInterval={4}
|
|
2550
|
+
* placeAdAtState={true}
|
|
2551
|
+
* :template={(item, index, { html }) => html`
|
|
2552
|
+
* <h2>${item.title}</h2>
|
|
2553
|
+
* `}
|
|
2554
|
+
* />
|
|
2555
|
+
* ```
|
|
2556
|
+
*/
|
|
2557
|
+
"searchcraft-search-results": LocalJSX.SearchcraftSearchResults & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsElement>;
|
|
3234
2558
|
/**
|
|
3235
2559
|
* This web component is designed to choose the number of search results displayed.
|
|
3236
|
-
*
|
|
3237
|
-
*
|
|
2560
|
+
* @react-import ```jsx
|
|
2561
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/react-sdk";
|
|
2562
|
+
* ```
|
|
2563
|
+
* @vue-import ```jsx
|
|
2564
|
+
* import { SearchcraftSearchResultsPerPage } from "@searchcraft/vue-sdk";
|
|
2565
|
+
* ```
|
|
2566
|
+
* @js-example ```html
|
|
3238
2567
|
* <!-- index.html -->
|
|
3239
2568
|
* <searchcraft-search-results-per-page increment="20" />
|
|
3240
2569
|
* ```
|
|
2570
|
+
* @react-example ```jsx
|
|
2571
|
+
* <SearchcraftSearchResultsPerPage increment={20} />
|
|
2572
|
+
* ```
|
|
2573
|
+
* @vue-example ```jsx
|
|
2574
|
+
* <SearchcraftSearchResultsPerPage increment="20" />
|
|
2575
|
+
* ```
|
|
3241
2576
|
*/
|
|
3242
2577
|
"searchcraft-search-results-per-page": LocalJSX.SearchcraftSearchResultsPerPage & JSXBase.HTMLAttributes<HTMLSearchcraftSearchResultsPerPageElement>;
|
|
3243
2578
|
/**
|
|
3244
2579
|
* This web component is designed to allow users to select between a group of options.
|
|
3245
|
-
*
|
|
3246
|
-
* ```html
|
|
2580
|
+
* @js-example ```html
|
|
3247
2581
|
* <!-- index.html -->
|
|
3248
2582
|
* <searchcraft-select
|
|
3249
2583
|
* inputId="searchcraft-select"
|
|
@@ -3254,33 +2588,40 @@ declare module "@stencil/core" {
|
|
|
3254
2588
|
*/
|
|
3255
2589
|
"searchcraft-select": LocalJSX.SearchcraftSelect & JSXBase.HTMLAttributes<HTMLSearchcraftSelectElement>;
|
|
3256
2590
|
/**
|
|
3257
|
-
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value.
|
|
3258
|
-
* The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
3259
|
-
* It is consumed by the `searchcraft-filter-panel` component.
|
|
2591
|
+
* This web component is designed to allow users to select a value from a range defined by a minimum and maximum value. The component renders a slider interface, which can be used to visually choose a value between two boundaries.
|
|
3260
2592
|
*/
|
|
3261
2593
|
"searchcraft-slider": LocalJSX.SearchcraftSlider & JSXBase.HTMLAttributes<HTMLSearchcraftSliderElement>;
|
|
3262
2594
|
/**
|
|
3263
|
-
* This web component adds Searchcraft's built-in css theme to your page
|
|
3264
|
-
*
|
|
3265
|
-
*
|
|
3266
|
-
* ```
|
|
3267
|
-
*
|
|
3268
|
-
*
|
|
2595
|
+
* This web component adds Searchcraft's built-in css theme to your page. It does not render anything visible, its only function is to manage the css styles on the page.'
|
|
2596
|
+
* @react-import ```jsx
|
|
2597
|
+
* import { SearchcraftTheme } from "@searchcraft/react-sdk";
|
|
2598
|
+
* ```
|
|
2599
|
+
* @vue-import ```jsx
|
|
2600
|
+
* import { SearchcraftTheme } from "@searchcraft/vue-sdk";
|
|
2601
|
+
* ```
|
|
2602
|
+
* @js-example ```html
|
|
2603
|
+
* <searchcraft-theme />
|
|
2604
|
+
* ```
|
|
2605
|
+
* @react-example ```jsx
|
|
2606
|
+
* <SearchcraftTheme />
|
|
2607
|
+
* ```
|
|
2608
|
+
* @vue-example ```jsx
|
|
2609
|
+
* <SearchcraftTheme />
|
|
3269
2610
|
* ```
|
|
3270
2611
|
*/
|
|
3271
2612
|
"searchcraft-theme": LocalJSX.SearchcraftTheme & JSXBase.HTMLAttributes<HTMLSearchcraftThemeElement>;
|
|
3272
2613
|
/**
|
|
3273
2614
|
* This web component simulates a light switch functionality, providing a simple and intuitive toggle between two states—on and off.
|
|
3274
|
-
* It is consumed within the `searchcraft-filter-panel` component.
|
|
3275
2615
|
*/
|
|
3276
2616
|
"searchcraft-toggle-button": LocalJSX.SearchcraftToggleButton & JSXBase.HTMLAttributes<HTMLSearchcraftToggleButtonElement>;
|
|
3277
2617
|
}
|
|
3278
2618
|
}
|
|
3279
2619
|
}
|
|
2620
|
+
export declare const defineCustomElements: () => void;
|
|
3280
2621
|
/**
|
|
3281
|
-
* The Props Used by the `
|
|
2622
|
+
* The Props Used by the `SearchcraftSearchResults` Component.
|
|
3282
2623
|
*/
|
|
3283
|
-
export interface
|
|
2624
|
+
export interface SearchcraftSearchResultsProps extends Components.SearchcraftSearchResults {
|
|
3284
2625
|
}
|
|
3285
2626
|
/**
|
|
3286
2627
|
* A component that renders a list of search results with customizable styles, layout, and link behavior.
|
|
@@ -3288,7 +2629,7 @@ export interface SearchcraftBaseSearchResultsProps extends Components.Searchcraf
|
|
|
3288
2629
|
* @example
|
|
3289
2630
|
* ```vue
|
|
3290
2631
|
* <script setup>
|
|
3291
|
-
* import
|
|
2632
|
+
* import SearchcraftSearchResults from '@searchcraft/vue-sdk';
|
|
3292
2633
|
* import searchResultMappings from './searchResultMappings';
|
|
3293
2634
|
*
|
|
3294
2635
|
* const handleNoResults = () => {
|
|
@@ -3297,7 +2638,7 @@ export interface SearchcraftBaseSearchResultsProps extends Components.Searchcraf
|
|
|
3297
2638
|
* </script>
|
|
3298
2639
|
*
|
|
3299
2640
|
* <template>
|
|
3300
|
-
* <
|
|
2641
|
+
* <SearchcraftSearchResults
|
|
3301
2642
|
* :searchResultMappings="searchResultMappings"
|
|
3302
2643
|
* resultImagePlacement="left"
|
|
3303
2644
|
* buttonLabel="View More"
|
|
@@ -3310,7 +2651,7 @@ export interface SearchcraftBaseSearchResultsProps extends Components.Searchcraf
|
|
|
3310
2651
|
* </template>
|
|
3311
2652
|
* ```
|
|
3312
2653
|
*/
|
|
3313
|
-
export declare const
|
|
2654
|
+
export declare const SearchcraftSearchResults: import("vue").DefineSetupFnComponent<LocalJSX.SearchcraftSearchResults & import("@stencil/vue-output-target/runtime").InputProps<string | number | boolean>, {}, {}, LocalJSX.SearchcraftSearchResults & import("@stencil/vue-output-target/runtime").InputProps<string | number | boolean>, import("vue").PublicProps>;
|
|
3314
2655
|
/**
|
|
3315
2656
|
* The props used by the SearchcraftFilterPanel.
|
|
3316
2657
|
*/
|
|
@@ -3464,7 +2805,7 @@ export interface SearchcraftThemeProps extends Components.SearchcraftTheme {
|
|
|
3464
2805
|
* </script>
|
|
3465
2806
|
*
|
|
3466
2807
|
* <template>
|
|
3467
|
-
* <SearchcraftTheme
|
|
2808
|
+
* <SearchcraftTheme />
|
|
3468
2809
|
* </template>
|
|
3469
2810
|
* ```
|
|
3470
2811
|
*/
|
|
@@ -3517,4 +2858,8 @@ export declare class Searchcraft extends SearchcraftCore {
|
|
|
3517
2858
|
constructor(config: SearchcraftConfig);
|
|
3518
2859
|
}
|
|
3519
2860
|
|
|
2861
|
+
export {
|
|
2862
|
+
LocalJSX as JSX,
|
|
2863
|
+
};
|
|
2864
|
+
|
|
3520
2865
|
export {};
|