A library for implementing a search modal component with various features and customizations.
You can install the library via npm or yarn:
npm install search-modal-library
yarn add search-modal-library
import { SearchModal } from 'adm-super-search-modal-2';
import 'adm-super-search-modal-2/dist/style.css';
-
modelValue
: Boolean - Controls the visibility of the modal. -
labels
: Object - Configuration for various labels displayed in the modal.-
title
: String - The title of the modal. -
inputPlaceholder
: String - Placeholder text for the search input. -
recentlyViewedLabel
: String - Label for the recently viewed section. -
recentlyViewedEmptyStateLabel
: String - Label for the empty state in the recently viewed section. -
emptyStateLabel
: String - Label for the empty state when no results are found. -
loadingLabel
: String - Label for the loading state. -
initialStateLabel
: String - Label for the initial state. -
errorStateLabel
: String - Label for the error state. -
viewAllButtonLabel
: String (optional) - Label for the "View All" button.
-
-
prefix
: String - Prefix for CSS classes. -
enableRecentlyViewed
: Boolean (optional) - Enables or disables the recently viewed section. -
viewAllButton
: Boolean (optional) - Shows or hides the "View All" button. -
entityId
: Number (optional) - Identifier for the entity. -
searchQuery
: String (optional) - The search query. -
recentlyViewedInstrumentsMaxCount
: Number (optional) - Maximum number of recently viewed instruments to display. -
searchInstrumentsMaxCount
: Number (optional) - Maximum number of search instruments to display. -
includeInfoRequest
: Boolean (optional) - Indicates whether to include info requests. -
dialogZIndex
: Number (optional) - Z-index for the modal dialog. -
infoCallback
: Function (optional) - A callback function used to fetch search information. It should have the following signature:(infoCallback: () => Promise<ISearchInfoResponse>) => void
. -
queryCallback
: Function (optional) - A callback function used to perform a search query. It should have the following signature:(queryCallback: (params: ISearchQueryParams) => Promise<ISearchQueryResponse>) => void
. -
requestQueryTradeCompanies
: Array (optional) - Filters for the search query request. It should have the following type:{ company_id: number; trade_type_id: number }[]
. -
requestQueryTypeId
: Number (optional) - Filter for the search query request by instrument type. -
requestQuerySubTypeId
: Number (optional) - Filter for the search query request by instrument subtype. -
requestQueryRelationType
: String (optional) - Filter for the search query request by instruments relation type.
-
close-modal
: () => void - Emits when the modal is closed. -
update:model-value
: (value: boolean) => void - Emits when the model value is updated. -
click-on-instrument
: (name: string, instrument: ISearchQueryDocument) => void - Emits when an instrument is clicked. -
click-on-view-all
: (query?: string) => void - Emits when the "View All" button is clicked.
Slot for the modal title.
Slot for the search input.
Slot for the recently viewed section.
-
recentlyViewedInstruments
: Array - List of recently viewed instruments. -
isEmpty
: Boolean - Indicates if the recently viewed section is empty.
Slot for the empty state message.
Slot for the search results.
-
foundInstruments
: Array - List of found instruments. -
isEmpty
: Boolean - Indicates if the search results are empty.