<commit_before><style lang="scss" scoped>

</style>

<template>
    <div>

        <button type="button"
            class="btn btn-secondary dropdown-toggle" 
            :id="uniqId" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false">
            <i class="fal fa-plus-circle"></i>
            {{ buttonText }}
        </button>

        <div class="dropdown-menu bg-gray-200 p-0"
            :aria-labelledby="uniqId">
            
            <div class="p-3">

                <input type="text"
                    class="form-control mb-2"
                    placeholder="Rechercher..."
                    v-model="search">

                <div class="bg-white rounded border border-1 border-gray-300 font-size-200" 
                    style="max-height: 200px; overflow-y: scroll;">
                    <div v-for="it in filteredItems"
                        :key="it.id"
                        class="py-1 px-3 pointer bg-gray-100-hover"
                        :class="{
                            'text-success-400 bg-success-100': hasItem(it)
                        }"
                        @click="$event.stopPropagation(); toggleItem(it)">
                        <span v-show="hasItem(it)">
                            <i class="fal fa-check-circle fa-fw mr-1"></i>
                        </span>
                        {{ it[itemsNameField] }}
                    </div>
                </div>
                
            </div>
        </div>

        <div v-for="item in dataValue" :key="item.id"
            class="bg-gray-100 rounded border border-1 border-gray-300 py-2 px-3 mt-1">
            <i class="fal fa-check-circle fa-fw mr-1"></i>
            {{ item[itemsNameField] }}
        </div>

    </div>
</template>

<script>

    import InputMixin from './InputMixin.js'

    export default {

        mixins: [InputMixin],

        data(){
            return {
                search: '',
                buttonText: 'Add...',
            };
        },

        props: {
            items: {<commit_msg>Update InputSelectDropdown.vue<commit_after><style lang="scss" scoped>

</style>

<template>
    <div>

        <button type="button"
            class="btn btn-secondary dropdown-toggle" 
            :id="uniqId" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            aria-expanded="false">
            <i class="fal fa-plus-circle"></i>
            {{ buttonText }}
        </button>

        <div class="dropdown-menu bg-gray-200 p-0"
            :aria-labelledby="uniqId">
            
            <div class="p-3">

                <input type="text"
                    class="form-control mb-2"
                    placeholder="Rechercher..."
                    v-model="search">

                <div class="bg-white rounded border border-1 border-gray-300 font-size-200" 
                    style="max-height: 200px; overflow-y: scroll;">
                    <div v-for="it in filteredItems"
                        :key="it.id"
                        class="py-1 px-3 pointer bg-gray-100-hover"
                        :class="{
                            'text-success-400 bg-success-100': hasItem(it)
                        }"
                        @click="$event.stopPropagation(); toggleItem(it)">
                        <span v-show="hasItem(it)">
                            <i class="fal fa-check-circle fa-fw mr-1"></i>
                        </span>
                        {{ it[itemsNameField] }}
                    </div>
                </div>
                
            </div>
        </div>

        <div v-for="item in dataValue" :key="item.id"
            class="bg-gray-100 rounded border border-1 border-gray-300 py-2 px-3 mt-1">
            <i class="fal fa-check-circle fa-fw mr-1"></i>
            {{ item[itemsNameField] }}
        </div>

    </div>
</template>

<script>

    import inputMixin from '../mixins/InputMixin.js'

    export default {

        mixins: [inputMixin],

        data(){
            return {
                search: '',
                buttonText: 'Add...',
            };
        },

        props: {
            items: {
{'fraction_non_alphanumeric': 0.13730139909888547, 'fraction_numerical': 0.01849656153663742, 'mean_word_length': 1.1356962025316455, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, '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': '4872927', 'n_tokens_mistral': 1252, 'n_tokens_neox': 1133, 'n_words': 221}