Installation

npm install @credenceanalytics/search-bar --save

import SearchBar from '@credenceanalytics/search-bar'

export default {
     props: {
        /** 
         * An `Array` or a `Promise` which resolves to an array or a `Function` which returns an array.
         * This array contains objects.
        */
        appList: {
            type: [Array, Promise, Function],
            default() {
                return [];
            },
        },

        /**
         * A key from appList array of object which contain reference to application name
         */
        appNameKey: {
            type: String,
            default: "APP_NAME",
        },

        /**
         * A key from appList array of object which contain reference to application route
         */
        routeKey: {
            type: String,
            default: "ROUTE",
        },

        /**
         * A key from appList array of object which contain reference to a field on whom this component will search the applications from `appList` array.
         */
        descriptionKey: {
            type: String,
            default: "DESCRIPTION",
        },

        /**
         *  A function if provided will get executed after route changes.
         */
        afterRouteChange: {
            type: Function,
        },

        /**
         *  A function is provided will change the route.
         * If you want change existing logic of route change, then pass this function as a prop and this function will used to change route
         */
        changeRoute: {
            type: Function,
            default: changeRoute,
        },
    },
    components: {
        SearchBar
    }
}

Example

1. search-bar component with default array list.

    <template>
        <search-bar app-list="appList" />
    </template>

    <script lang="javascript">
        import SearchBar from '@credenceanalytics/search-bar'

        export default {
            components: {
               SearchBar 
            },

            data() {
                return {
                    appList: [
                        {
                            ROUTE: "/Framewrk/Operations.html?module/V132/m12",
                            APP_NAME: "Operations",
                            DESCRIPTION: "Deal Listing (Operations)"
                        },
                        {
                            ROUTE: "/Framewrk/ClientManagement.html?module/V122/m2",
                            APP_NAME: "Client Management",
                            DESCRIPTION: "Client (Client Management)"
                        }
                    ]
                }
            }
        }
    </script>

2. search-bar component with different array list or different key references to routes, appname, etc..

    <template>
        <search-bar 
            app-list="appList" 
            app-name-key="NAME" 
            route-key="APP_ROUTE"
            description-key="BDESC"
        />
    </template>

    <script lang="javascript">
        import SearchBar from '@credenceanalytics/search-bar'

        export default {
            components: {
               SearchBar 
            },

            data() {
                return {
                    appList: [
                        {
                            APP_ROUTE: "/Framewrk/Operations.html?module/V132/m12",
                            NAME: "Operations",
                            BDESC: "Deal Listing (Operations)"
                        },
                        {
                            APP_ROUTE: "/Framewrk/ClientManagement.html?module/V122/m2",
                            NAME: "Client Management",
                            BDESC: "Client (Client Management)"
                        }
                    ],
                }
            }
        }
    </script>