<commit_before><template>
  <div
    class="catalogDropdown"
    @keydown.down.prevent="onKeydownDown"
    @keydown.up.prevent="onKeydownUp"
    :class="{'is-disabled': isDisabled, 'is-open': isOpen}">
    <span class="title is-caption catalogDropdown__label">{{ title }}</span>
    <div class="catalogDropdown__container">
      <div v-if="showInput">
        <input type="text"
          class="text is-caption catalogDropdown__input"
          :class="{ 'has-error': hasError }"
          :placeholder="!isDisabled ?  placeholderActive : placeholderInactive"
          v-model="searchFilter"
          @focus="onInputFocus"
          @click="openDropdown"
          @keyup.enter="onKeyEnter"
          :disabled="isDisabled || hasError">
      </div>
      <div v-else
        class="text is-caption catalogDropdown__input"
        :class="{ 'has-error': hasError }"
        @click="openDropdown">
        <CatalogDropdownItem v-if="this.searchFilter" :option="this.searchFilter"/>
        <span v-else class="catalogDropdown__input--placeholder">{{ this.placeholder }}</span>
        <button
          v-if="searchFilter"
          class="catalogDropdown__close"
          @click="reset">
          <img src="../../assets/icons/common/dropdown-close.svg" width="16" height="20" />
        </button>
      </div>
      <p class="catalogDropdown__error text is-small" v-if="hasError">{{ error }}</p>
      <ul ref="catalogDropdownList"
        class="catalogDropdown__list"
        v-click-outside="closeDropdown"
        :class="{
          'is-open ps-container': isOpen,
          'is-height-limited': limitHeight,
          'ps-active-y': showScroll
        }"
        @mouseleave="resetActiveOption">
        <li
          v-for="(option, index) in filteredOptions" :key="option"
          @click="selectOption(option)"
          class="catalogDropdown__option text is-caption"
          :class="{'catalogDropdown__option--active': activeOptionIndex === index + 1}"
          @mouseover="updateActiveOption(index + 1)">
          <CatalogDropdownItem :option="option"/>
        </li>
      </ul>
      <div class="catalogDropdown__extra">
        <slot name="extra"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import CatalogDropdownItem from './CatalogDropdownItem';
import PerfectScrollbar from 'perfect-scrollbar';

export default {
  name: 'CatalogDropdown',
  components: {
    CatalogDropdownItem
  },
  props: {
    title: String,
    placeholderActive: String,
    placeholderInactive: String,
    options: {
      type: Array,
      default () {
        return [];
      }
    },
    open: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limitHeight: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selected: {},
      isInputFocused: false,
      activeOptionIndex: -1,
      searchFilter: '',
      isOpen: this.open,
      isDisabled: this.disabled,
      error: ''
    };
  },
  computed: {
    maxItemsScroll () {
      const PAGE_HEIGHT = window.innerHeight;
      const SMALL_HEIGHT = 680;
      const MEDIUM_HEIGHT = 850;
      const HEIGHT_SMALL_MAX_ITEMS = 3;
      const HEIGHT_MEDIUM_MAX_ITEMS = 5;
      const HEIGHT_DEFAULT_MAX_ITEMS = 8;

      if (PAGE_HEIGHT < SMALL_HEIGHT ) {
        return HEIGHT_SMALL_MAX_ITEMS;
      }<commit_msg>Create computed variable for placeholder<commit_after><template>
  <div
    class="catalogDropdown"
    @keydown.down.prevent="onKeydownDown"
    @keydown.up.prevent="onKeydownUp"
    :class="{'is-disabled': isDisabled, 'is-open': isOpen}">
    <span class="title is-caption catalogDropdown__label">{{ title }}</span>
    <div class="catalogDropdown__container">
      <div v-if="showInput">
        <input type="text"
          class="text is-caption catalogDropdown__input"
          :class="{ 'has-error': hasError }"
          :placeholder="placeholder"
          v-model="searchFilter"
          @focus="onInputFocus"
          @click="openDropdown"
          @keyup.enter="onKeyEnter"
          :disabled="isDisabled || hasError">
      </div>
      <div v-else
        class="text is-caption catalogDropdown__input"
        :class="{ 'has-error': hasError }"
        @click="openDropdown">
        <CatalogDropdownItem v-if="this.searchFilter" :option="this.searchFilter"/>
        <span v-else class="catalogDropdown__input--placeholder">{{ this.placeholder }}</span>
        <button
          v-if="searchFilter"
          class="catalogDropdown__close"
          @click="reset">
          <img src="../../assets/icons/common/dropdown-close.svg" width="16" height="20" />
        </button>
      </div>
      <p class="catalogDropdown__error text is-small" v-if="hasError">{{ error }}</p>
      <ul ref="catalogDropdownList"
        class="catalogDropdown__list"
        v-click-outside="closeDropdown"
        :class="{
          'is-open ps-container': isOpen,
          'is-height-limited': limitHeight,
          'ps-active-y': showScroll
        }"
        @mouseleave="resetActiveOption">
        <li
          v-for="(option, index) in filteredOptions" :key="option"
          @click="selectOption(option)"
          class="catalogDropdown__option text is-caption"
          :class="{'catalogDropdown__option--active': activeOptionIndex === index + 1}"
          @mouseover="updateActiveOption(index + 1)">
          <CatalogDropdownItem :option="option"/>
        </li>
      </ul>
      <div class="catalogDropdown__extra">
        <slot name="extra"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import CatalogDropdownItem from './CatalogDropdownItem';
import PerfectScrollbar from 'perfect-scrollbar';

export default {
  name: 'CatalogDropdown',
  components: {
    CatalogDropdownItem
  },
  props: {
    title: String,
    placeholderActive: String,
    placeholderInactive: String,
    options: {
      type: Array,
      default () {
        return [];
      }
    },
    open: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limitHeight: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selected: {},
      isInputFocused: false,
      activeOptionIndex: -1,
      searchFilter: '',
      isOpen: this.open,
      isDisabled: this.disabled,
      error: ''
    };
  },
  computed: {
    placeholder () {
      return !this.isDisabled ? this.placeholderActive : this.placeholderInactive;
    },
    maxItemsScroll () {
      const PAGE_HEIGHT = window.innerHeight;
      const SMALL_HEIGHT = 680;
      const MEDIUM_HEIGHT = 850;
      const HEIGHT_SMALL_MAX_ITEMS = 3;
      const HEIGHT_MEDIUM_MAX_ITEMS = 5;
      const HEIGHT_DEFAULT_MAX_ITEMS = 8;

      if (PAGE_HEIGHT < SMALL_HEIGHT ) {
        return HEIGHT_SMALL_MAX_ITEMS;
      }
{'fraction_non_alphanumeric': 0.13543329946291188, 'fraction_numerical': 0.004645086369574684, 'mean_word_length': 2.488607594936709, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 65, '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': '378095', 'n_tokens_mistral': 2103, 'n_tokens_neox': 2063, 'n_words': 391}