<commit_before><script>
import { ref } from '@vue/composition-api'
import { useOrientation } from '../layout/orientation'

export default {
  props: {
    items: {
      type: Array,
      required: true
    },

    selectedItem: {
      type: Object,
      default: () => ({})
    },

    optionIcon: {
      type: String,
      default: null
    }
  },

  setup (props, { emit }) {
    const isOpen = ref(false)
    let disabled = false

    let timer = null

    function open () {
      clearTimeout(timer)
      if (disabled) return
      isOpen.value = true
    }

    function queueClose () {
      clearTimeout(timer)
      timer = setTimeout(() => {
        isOpen.value = false
      }, 500)
    }

    function select (item) {
      disabled = true
      emit('select', item)
      // Disable menu for a short time after selecting an item
      setTimeout(() => {
        disabled = false
      }, 500)
    }

    const { orientation } = useOrientation()

    return {
      isOpen,
      open,
      queueClose,
      select,
      orientation
    }
  }
}
</script>

<template>
  <VueDropdown
    placement="bottom-start"
    trigger="manual"
    offset="0"
    :open.sync="isOpen"
    :open-group="`header-select-${_uid}`"
  >
    <template #trigger>
      <div
        @mouseover="open()"
        @mouseout="queueClose()"
      >
        <slot name="trigger">
          <VueButton
            class="flat"
            :icon-left="selectedItem.icon"
            :icon-right="orientation === 'landscape' ? 'arrow_drop_down' : null"
            :class="{
              'icon-button': orientation === 'portrait'
            }"
          >
            <template v-if="orientation === 'landscape'">
              {{ selectedItem.label }}
            </template>
          </VueButton>
        </slot>
      </div>
    </template>

    <div>
      <div
        class="flex flex-col"<commit_msg>fix: add header select open delay<commit_after><script>
import { ref } from '@vue/composition-api'
import { useOrientation } from '../layout/orientation'

export default {
  props: {
    items: {
      type: Array,
      required: true
    },

    selectedItem: {
      type: Object,
      default: () => ({})
    },

    optionIcon: {
      type: String,
      default: null
    }
  },

  setup (props, { emit }) {
    const isOpen = ref(false)
    const isShown = ref(false)
    let disabled = false

    let timer = null

    function open () {
      clearTimeout(timer)
      if (disabled) return
      isOpen.value = true
    }

    function queueClose () {
      clearTimeout(timer)
      if (!isShown.value) {
        isOpen.value = false
      } else {
        timer = setTimeout(() => {
          isOpen.value = false
        }, 500)
      }
    }

    function select (item) {
      disabled = true
      emit('select', item)
      // Disable menu for a short time after selecting an item
      setTimeout(() => {
        disabled = false
      }, 500)
    }

    const { orientation } = useOrientation()

    return {
      isOpen,
      isShown,
      open,
      queueClose,
      select,
      orientation
    }
  }
}
</script>

<template>
  <VueDropdown
    placement="bottom-start"
    trigger="manual"
    offset="0"
    :open.sync="isOpen"
    :open-group="`header-select-${_uid}`"
    :delay="{ show: 250, hide: 0 }"
    @apply-show="isShown = true"
    @apply-hide="isShown = false"
  >
    <template #trigger>
      <div
        @mouseover="open()"
        @mouseout="queueClose()"
      >
        <slot name="trigger">
          <VueButton
            class="flat"
            :icon-left="selectedItem.icon"
            :icon-right="orientation === 'landscape' ? 'arrow_drop_down' : null"
            :class="{
              'icon-button': orientation === 'portrait'
            }"
          >
            <template v-if="orientation === 'landscape'">
              {{ selectedItem.label }}
            </template>
          </VueButton>
        </slot>
      </div>
    </template>

    <div>
      <div
        class="flex flex-col"
{'fraction_non_alphanumeric': 0.1375400542272615, 'fraction_numerical': 0.004436775942814888, 'mean_word_length': 1.751186440677966, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '2274657', 'n_tokens_mistral': 1256, 'n_tokens_neox': 1200, 'n_words': 268}