Search Modal Library

A library for implementing a search modal component with various features and customizations.

Installation

You can install the library via npm or yarn:

npm install search-modal-library

yarn add search-modal-library

Using

import { SearchModal } from 'adm-super-search-modal-2';
import 'adm-super-search-modal-2/dist/style.css';

Props

• 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.
  • filterLabels: Object (optional) - Configuration for filter tabs labels displayed in the modal.
• 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.
• isCryptoAllowed: Boolean (optional) - Option for enabling crypto filter option.
• searchFiltersPreset: Number (optional) - Option for choosing tabs (invest/trading/both).

Emits

• 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.

Slots

title

Slot for the modal title.

search-input

Slot for the search input.

recently-viewed

Slot for the recently viewed section.

Parameters:

• recentlyViewedInstruments: Array - List of recently viewed instruments.
• isEmpty: Boolean - Indicates if the recently viewed section is empty.

empty-state

Slot for the empty state message.

search-result

Slot for the search results.

Parameters:

• foundInstruments: Array - List of found instruments.
• isEmpty: Boolean - Indicates if the search results are empty.