<commit_before><template>
    <div class="SharpAutocomplete"
         :class="[`SharpAutocomplete--${state}`,
                 {'SharpAutocomplete--remote':isRemote},
                 {'SharpAutocomplete--disabled':readOnly}]">
        <div v-if="state==='valuated' && value" class="SharpAutocomplete__result-item">
            <sharp-template name="ResultItem" :template="resultItemTemplate" :template-data="localizedTemplateData(value)"></sharp-template>
            <button class="SharpAutocomplete__result-item__close-button" type="button" @click="handleResetClick">
                <svg class="SharpAutocomplete__result-item__close-icon"
                     aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
                    <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
                </svg>
            </button>
        </div>
        <multiselect v-if="state!=='valuated'"
                     class="SharpAutocomplete__multiselect"
                     :class="{'SharpAutocomplete__multiselect--hide-dropdown':hideDropdown}"
                     :value="value"
                     :options="suggestions"
                     :track-by="itemIdAttribute"
                     :internal-search="false"
                     :placeholder="placeholder"
                     :loading="isLoading"
                     :disabled="readOnly"
                     preserve-search
                     @search-change="updateSuggestions($event)"
                     @select="handleSelect"
                     @close="handleDropdownClose"
                     @open="opened=true"
                     ref="multiselect">
            <template slot="option" slot-scope="props">
                <sharp-template name="ListItem" :template="listItemTemplate" :template-data="localizedTemplateData(props.option)"></sharp-template>
            </template>
            <template slot="loading">
                <sharp-loading :visible="isLoading" inline small></sharp-loading>
            </template>
            <template slot="noResult">{{ l('form.autocomplete.no_results_text') }}</template>
        </multiselect>
    </div>
</template>

<script>
    import Template from '../../Template.vue';
    import Loading from '../../ui/Loading.vue';
    import Multiselect from 'vue-multiselect';

    import SearchStrategy from '../../../app/models/SearchStrategy';

    import axios from 'axios';

    import { warn, error } from '../../../util';
    import { Localization, Debounce } from '../../../mixins';
    import { lang } from '../../../mixins/Localization';

    import localize from '../../../mixins/localize/Autocomplete';

    export default {
        name:'SharpAutocomplete',
        components: {
            Multiselect,
            [Template.name]:Template,
            [Loading.name]: Loading
        },

        mixins: [Localization, Debounce, localize],

        props: {
            fieldKey: String,

            value: [String, Number, Object],

            mode: String,
            localValues: {
                type: Array,
                default:()=>[]
            },
            placeholder: {
                type: String,
                default: () => lang('form.multiselect.placeholder')
            },
            remoteEndpoint: String,
            remoteMethod:String,
            remoteSearchAttribute: {
                type: String,
                default: 'query'
            },
            itemIdAttribute: {
                type:String,
                default: 'id'
            },
            searchMinChars: {
                type: Number,
                default: 1
            },
            searchKeys: {
                type: Array,
                default:()=>['value']
            },
            readOnly: Boolean,
            listItemTemplate: String,
            resultItemTemplate: String,
        },
        data() {
            return {
                query: '',
                suggestions: this.localValues,
                opened: false,
                state: 'initial'
            }
        },
        watch: {
            locale() {
                this.initState();
            }
        },
        computed: {
            isRemote() {
                return this.mode === 'remote';
            },
            isLoading() {
                return this.state === 'loading' || this.opened && !!this.query.length && this.hideDropdown;
            },
            hideDropdown() {
                return this.isRemote ? this.query.length < this.searchMinChars : false;
            },
            searchStrategy() {
                return !this.isRemote ? new SearchStrategy({
                    list: this.localValues,
                    minQueryLength: this.searchMinChars,
                    searchKeys: this.localizedSearchKeys
                }) : null;
            },
        },
        methods: {
            callApi(query) {
                return this.remoteMethod === 'GET' ?
                    axios.get(this.remoteEndpoint,{
                        params: {
                            [this.remoteSearchAttribute]:query
                        }
                    }): axios.post(this.remoteEndpoint,{
                        [this.remoteSearchAttribute]:query
                    })
            },

            updateSuggestions(query) {
                this.query = query;
                if(this.hideDropdown)
                    return;
                if(this.isRemote) {
                    this.state = 'loading';
                    this.updateRemoteSuggestions();
                }<commit_msg>Remote autocomplete locale in query<commit_after><template>
    <div class="SharpAutocomplete"
         :class="[`SharpAutocomplete--${state}`,
                 {'SharpAutocomplete--remote':isRemote},
                 {'SharpAutocomplete--disabled':readOnly}]">
        <div v-if="state==='valuated' && value" class="SharpAutocomplete__result-item">
            <sharp-template name="ResultItem" :template="resultItemTemplate" :template-data="localizedTemplateData(value)"></sharp-template>
            <button class="SharpAutocomplete__result-item__close-button" type="button" @click="handleResetClick">
                <svg class="SharpAutocomplete__result-item__close-icon"
                     aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
                    <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
                </svg>
            </button>
        </div>
        <multiselect v-if="state!=='valuated'"
                     class="SharpAutocomplete__multiselect"
                     :class="{'SharpAutocomplete__multiselect--hide-dropdown':hideDropdown}"
                     :value="value"
                     :options="suggestions"
                     :track-by="itemIdAttribute"
                     :internal-search="false"
                     :placeholder="placeholder"
                     :loading="isLoading"
                     :disabled="readOnly"
                     preserve-search
                     @search-change="updateSuggestions($event)"
                     @select="handleSelect"
                     @close="handleDropdownClose"
                     @open="opened=true"
                     ref="multiselect">
            <template slot="option" slot-scope="props">
                <sharp-template name="ListItem" :template="listItemTemplate" :template-data="localizedTemplateData(props.option)"></sharp-template>
            </template>
            <template slot="loading">
                <sharp-loading :visible="isLoading" inline small></sharp-loading>
            </template>
            <template slot="noResult">{{ l('form.autocomplete.no_results_text') }}</template>
        </multiselect>
    </div>
</template>

<script>
    import Template from '../../Template.vue';
    import Loading from '../../ui/Loading.vue';
    import Multiselect from 'vue-multiselect';

    import SearchStrategy from '../../../app/models/SearchStrategy';

    import axios from 'axios';

    import { warn, error } from '../../../util';
    import { Localization, Debounce } from '../../../mixins';
    import { lang } from '../../../mixins/Localization';

    import localize from '../../../mixins/localize/Autocomplete';

    export default {
        name:'SharpAutocomplete',
        components: {
            Multiselect,
            [Template.name]:Template,
            [Loading.name]: Loading
        },

        mixins: [Localization, Debounce, localize],

        props: {
            fieldKey: String,

            value: [String, Number, Object],

            mode: String,
            localValues: {
                type: Array,
                default:()=>[]
            },
            placeholder: {
                type: String,
                default: () => lang('form.multiselect.placeholder')
            },
            remoteEndpoint: String,
            remoteMethod:String,
            remoteSearchAttribute: {
                type: String,
                default: 'query'
            },
            itemIdAttribute: {
                type:String,
                default: 'id'
            },
            searchMinChars: {
                type: Number,
                default: 1
            },
            searchKeys: {
                type: Array,
                default:()=>['value']
            },
            readOnly: Boolean,
            listItemTemplate: String,
            resultItemTemplate: String,
        },
        data() {
            return {
                query: '',
                suggestions: this.localValues,
                opened: false,
                state: 'initial'
            }
        },
        watch: {
            locale() {
                this.initState();
            }
        },
        computed: {
            isRemote() {
                return this.mode === 'remote';
            },
            isLoading() {
                return this.state === 'loading' || this.opened && !!this.query.length && this.hideDropdown;
            },
            hideDropdown() {
                return this.isRemote ? this.query.length < this.searchMinChars : false;
            },
            searchStrategy() {
                return !this.isRemote ? new SearchStrategy({
                    list: this.localValues,
                    minQueryLength: this.searchMinChars,
                    searchKeys: this.localizedSearchKeys
                }) : null;
            },
        },
        methods: {
            callApi(query) {
                let params = { [this.remoteSearchAttribute]:query };
                if(this.localized)
                    params.locale = this.locale;
                return this.remoteMethod === 'GET'
                    ? axios.get(this.remoteEndpoint, { params })
                    : axios.post(this.remoteEndpoint, params)
            },

            updateSuggestions(query) {
                this.query = query;
                if(this.hideDropdown)
                    return;
                if(this.isRemote) {
                    this.state = 'loading';
                    this.updateRemoteSuggestions();
                }
{'fraction_non_alphanumeric': 0.12389380530973451, 'fraction_numerical': 0.009026548672566371, 'mean_word_length': 1.379658875552748, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5561361', 'n_tokens_mistral': 2972, 'n_tokens_neox': 2702, 'n_words': 511}