{"version":3,"file":"BrickLookup-CI5EjuC1.js","sources":["../../../resources/js/components/BrickLookup.vue"],"sourcesContent":["<template>\n    <div class=\"relative\">\n        <input type=\"hidden\" name=\"brick_type\" :value=\"sku\">\n\n        <div class=\"absolute w-full h-full top-0 left-0 py-1 -mt-px pl-3 pr-8 pointer-events-none select-none\" v-if=\"selection\">\n            <div class=\"flex items-center whitespace-nowrap\">\n                <div class=\"w-6 h-6 flex items-center justify-center overflow-hidden rounded-sm mr-3\">\n                    <div class=\"w-full h-full bg-center bg-cover\" :style=\"{\n                        'background-image': `url(${selection.primaryImage.url})`,\n                    }\"></div>\n                </div>\n\n                <div class=\"overflow-hidden\">\n                    <span class=\"block text-sm font-medium\" v-text=\"selection.display_name\"></span>\n                    <span class=\"block text-xs opacity-75\" v-text=\"selection.sku\"></span>\n                </div>\n            </div>\n        </div>\n\n        <vue-autosuggest\n            ref=\"autocomplete\"\n            :class=\"{ 'has-selection': this.selection }\"\n            :suggestions=\"suggestions\"\n            :inputProps=\"inputProps\"\n            :getSuggestionValue=\"getSuggestionValue\"\n            autocomplete=\"off\"\n            v-model=\"input\"\n            @input=\"search\"\n            @click=\"reset\"\n            @focus=\"focus\"\n            @blur=\"blur\"\n            @selected=\"select\"\n        >\n            <div slot-scope=\"{suggestion}\" class=\"px-2 py-1 cursor-pointer\">\n                <div class=\"flex items-center\">\n                    <div class=\"w-8 h-8 flex items-center justify-center overflow-hidden rounded-sm mr-2\">\n                        <div class=\"w-full h-full bg-center bg-cover\" :style=\"{\n                            'background-image': `url(${suggestion.item.primaryImage.url})`,\n                        }\"></div>\n                    </div>\n\n                    <div>\n                        <span class=\"cursor-pointer block text-sm font-medium\" v-text=\"suggestion.item.display_name\"></span>\n                        <span class=\"cursor-pointer block text-xs opacity-75\" v-text=\"suggestion.item.sku\"></span>\n                    </div>\n                </div>\n            </div>\n\n            <div v-if=\"! instance && focused && 0 !== (input || '').length && 0 === length\" class=\"autosuggest__results-container\" slot=\"after-input\">\n                <div class=\"suggestion-wrapper\">\n                    <div class=\"px-3 py-1\">\n                        <!-- <div v-if=\"this.instance\" class=\"flex flex-col items-center\">\n                            <span class=\"block text-sm font-medium\">Searching...</span>\n                            <span class=\"block text-xs opacity-75\">Please wait.</span>\n                        </div> -->\n\n                        <div>\n                            <span class=\"block text-sm font-medium\">No Bricks Found</span>\n                            <span class=\"block text-xs opacity-75\">Please try another search term to find a brick</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </vue-autosuggest>\n    </div>\n</template>\n\n<script>\nimport { uniqueId } from 'lodash-es';\nimport { debounce } from 'lodash-es';\n\nimport { VueAutosuggest } from 'vue-autosuggest';\n\nexport default {\n    components: {\n        VueAutosuggest,\n    },\n\n    props: {\n        value: {\n            type: String,\n            required: false,\n        },\n    },\n\n    data() {\n        return {\n            instance: null,\n            suggestions: [],\n            input: null,\n            selection: null,\n            previous: null,\n            focused: false,\n        };\n    },\n\n    mounted() {\n        const searchParams = new URLSearchParams(window.location.search);\n        if (! searchParams.get('sku')) {\n            return;\n        }\n\n        this.input = searchParams.get('sku');\n        this.autocomplete.value = searchParams.get('sku');\n\n        this.search(this.input, 1)\n            .then(({ suggestions, items }) => {\n                if (0 === suggestions.length) {\n                    return;\n                }\n\n                this.selection = items[0];\n            });\n    },\n\n    watch: {\n        selection() {\n            Orbit.$emit('global::brick:selected', this.selection);\n            this.$emit('selected', this.selection);\n        },\n\n        input(e) {\n            this.selection = null;\n        },\n    },\n\n    computed: {\n        sku() {\n            if (! this.selection) {\n                return this.input;\n            }\n\n            return this.selection.sku;\n        },\n\n        autocomplete() {\n            return this.$refs.autocomplete;\n        },\n\n        inputProps() {\n            return {\n                placeholder: 'Search brick names...',\n                name: 'brick_type_autocomplete',\n                class: 'input w-full',\n            };\n        },\n\n        variations() {\n            return this.selection ? this.selection.variations : [];\n        },\n\n        length() {\n            return 0 === this.suggestions.length ? 0\n                : this.suggestions[0].data.length;\n        },\n    },\n\n    methods: {\n        reset() {\n            if (! this.selection) {\n                return;\n            }\n\n            this.previous = this.selection;\n            this.selection = null;\n        },\n\n        focus() {\n            this.focused = true;\n        },\n\n        blur() {\n            this.focused = false;\n\n            this.recover();\n        },\n\n        recover() {\n            if (! this.previous || this.previous.sku !== this.autocomplete.value) {\n                return;\n            }\n\n            this.selection = this.previous;\n        },\n\n        select(selection) {\n            this.selection = selection ? selection.item : null;\n        },\n\n        search(term, limit = 5) {\n            let instance = this.instance = uniqueId('brickLookup');\n\n            return new Promise((resolve, reject) => {\n                axios.get('/api/cortex/bricks', {\n                    params: {\n                        'filter[search]': term,\n                        'per_page': limit,\n                    },\n                }).then(({ data }) => {\n                    if (this.instance !== instance) {\n                        return;\n                    }\n\n                    // If no results from first request, make a second request\n                    if (data.data.length === 0) {\n                        return axios.get('/api/cortex/bricks/clearance', {\n                            params: {\n                                'filter[search]': term,\n                                'per_page': limit,\n                            }\n                        })\n                    }\n\n                    return data;\n                }).then((response) => {\n                    if (this.instance !== instance) {\n                        return;\n                    }\n\n                    this.instance = null;\n\n                    // Handle response based on whether it came from the first or second request\n                    const results = response.data.data ? response.data.data : response.data;\n\n                    this.suggestions = [{ data: results }];\n\n                    resolve({ suggestions: this.suggestions, items: results });\n                }).catch(reject);\n            });\n        },\n\n        getSuggestionValue(suggestion) {\n            return suggestion.item.sku;\n        },\n    },\n};\n</script>\n\n<style lang=\"scss\">\n.outline-none {\n    outline: none;\n}\n\n.has-selection input {\n    color: transparent;\n}\n\n.autosuggest__results-container {\n    left: 0;\n    right: 0;\n    top: 2.5rem;\n    position: absolute;\n\n    .autosuggest__results {\n        position: absolute;\n        width: 100%;\n        left: 0;\n        right: 0;\n        top: 0;\n        z-index: 25;\n\n        &_item-highlighted {\n            background-color: #bcdefa;\n        }\n    }\n\n    ul,\n    .suggestion-wrapper {\n        @apply p-0 m-0 bg-light rounded-b-md border border-grey-200 border-t-0 ring-2 ring-green-400;\n    }\n}\n</style>\n\n"],"names":["_sfc_main","VueAutosuggest","searchParams","suggestions","items","e","selection","term","limit","instance","uniqueId","resolve","reject","data","response","results","suggestion"],"mappings":"sIAyEA,MAAAA,EAAA,CACA,WAAA,CACA,eAAAC,CACA,EAEA,MAAA,CACA,MAAA,CACA,KAAA,OACA,SAAA,EACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,KACA,YAAA,CAAA,EACA,MAAA,KACA,UAAA,KACA,SAAA,KACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,MAAAC,EAAA,IAAA,gBAAA,OAAA,SAAA,MAAA,EACAA,EAAA,IAAA,KAAA,IAIA,KAAA,MAAAA,EAAA,IAAA,KAAA,EACA,KAAA,aAAA,MAAAA,EAAA,IAAA,KAAA,EAEA,KAAA,OAAA,KAAA,MAAA,CAAA,EACA,KAAA,CAAA,CAAA,YAAAC,EAAA,MAAAC,KAAA,CACAD,EAAA,SAAA,IAIA,KAAA,UAAAC,EAAA,CAAA,EACA,CAAA,EACA,EAEA,MAAA,CACA,WAAA,CACA,MAAA,MAAA,yBAAA,KAAA,SAAA,EACA,KAAA,MAAA,WAAA,KAAA,SAAA,CACA,EAEA,MAAAC,EAAA,CACA,KAAA,UAAA,IACA,CACA,EAEA,SAAA,CACA,KAAA,CACA,OAAA,KAAA,UAIA,KAAA,UAAA,IAHA,KAAA,KAIA,EAEA,cAAA,CACA,OAAA,KAAA,MAAA,YACA,EAEA,YAAA,CACA,MAAA,CACA,YAAA,wBACA,KAAA,0BACA,MAAA,cACA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,UAAA,KAAA,UAAA,WAAA,CAAA,CACA,EAEA,QAAA,CACA,OAAA,KAAA,YAAA,SAAA,EAAA,EACA,KAAA,YAAA,CAAA,EAAA,KAAA,MACA,CACA,EAEA,QAAA,CACA,OAAA,CACA,KAAA,YAIA,KAAA,SAAA,KAAA,UACA,KAAA,UAAA,KACA,EAEA,OAAA,CACA,KAAA,QAAA,EACA,EAEA,MAAA,CACA,KAAA,QAAA,GAEA,KAAA,QAAA,CACA,EAEA,SAAA,CACA,CAAA,KAAA,UAAA,KAAA,SAAA,MAAA,KAAA,aAAA,QAIA,KAAA,UAAA,KAAA,SACA,EAEA,OAAAC,EAAA,CACA,KAAA,UAAAA,EAAAA,EAAA,KAAA,IACA,EAEA,OAAAC,EAAAC,EAAA,EAAA,CACA,IAAAC,EAAA,KAAA,SAAAC,EAAA,aAAA,EAEA,OAAA,IAAA,QAAA,CAAAC,EAAAC,IAAA,CACA,MAAA,IAAA,qBAAA,CACA,OAAA,CACA,iBAAAL,EACA,SAAAC,CACA,CACA,CAAA,EAAA,KAAA,CAAA,CAAA,KAAAK,KAAA,CACA,GAAA,KAAA,WAAAJ,EAKA,OAAAI,EAAA,KAAA,SAAA,EACA,MAAA,IAAA,+BAAA,CACA,OAAA,CACA,iBAAAN,EACA,SAAAC,CACA,CACA,CAAA,EAGAK,CACA,CAAA,EAAA,KAAAC,GAAA,CACA,GAAA,KAAA,WAAAL,EACA,OAGA,KAAA,SAAA,KAGA,MAAAM,EAAAD,EAAA,KAAA,KAAAA,EAAA,KAAA,KAAAA,EAAA,KAEA,KAAA,YAAA,CAAA,CAAA,KAAAC,CAAA,CAAA,EAEAJ,EAAA,CAAA,YAAA,KAAA,YAAA,MAAAI,EAAA,CACA,CAAA,EAAA,MAAAH,CAAA,CACA,CAAA,CACA,EAEA,mBAAAI,EAAA,CACA,OAAAA,EAAA,KAAA,GACA,CACA,CACA"}