<commit_before><template lang="pug">
  div(
    class="menu"
    v-click-outside
  )

    div(
      v-on:click="activate"
      ref="activator"
    )
      slot(name="activator")

    component(
      v-bind:is="transition"
      v-bind:origin="origin"
    )
      div(
        ref="content"
        class="menu__content"
        v-on:click="isActive = false"
        v-show="isActive"
        v-bind:style="styles"
      )
        slot
</template>

<script>
  import Toggleable from '../../mixins/toggleable'

  export default {
    name: 'menu',

    mixins: [Toggleable],

    data () {
      return {
        dimensions: {
          activator: {},
          content: {},
          list: {},
          item: {}
        },
        position: {
          top: 0,
          left: 0
        },
        minWidth: 'auto'
      }
    },

    props: {
      auto: Boolean,
      left: Boolean,
      bottom: Boolean,
      right: Boolean,
      maxHeight: {
        type: [String, Number],
        default: 'auto'
      },
      offsetX: Boolean,
      offsetY: Boolean,
      origin: {
        type: String,
        default: 'top left'
      },
      top: Boolean,
      transition: {
        type: String,
        default: 'v-menu-transition'
      }
    },

    computed: {
      direction () {
        return {
          'vertical': (this.bottom || this.auto) ? 'bottom' : 'top',
          'horizontal': (this.right || this.auto) ? 'right' : 'left'
        }
      },

      offset () {
        return {
          'top': this.offsetY ? this.dimensions.activator.height : 0,
          'left': this.offsetX ? this.dimensions.activator.width : 0
        }
      },

      styles () {
        return {
          top: `${this.position.top}px`,
          left: `${this.position.left}px`,
          maxHeight: isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`,
          minWidth: `${this.minWidth}px`
        }
      }
    },

    mounted () {
      // Move content to beginning of the document (easier to re-position later).
      document.body.insertBefore(this.$refs.content, document.body.firstChild)
    },

    methods: {

      activate () {
        this.isActive = true
        this.updateDimensions()
        this.updatePosition()
      },

      updateDimensions () {
        this.$refs.content.style.display = 'block'
        this.dimensions = {
          'activator': this.rect(this.$refs.activator),
          'content': this.rect(this.$refs.content),
          'list': this.rect(this.$refs.content, '.list'),
          'item': this.rect(this.$refs.content, '.list__item')
        }
      },
<commit_msg>added class and content display none<commit_after><template lang="pug">
  div(
    class="menu"
    v-click-outside
  )

    div(
      class="menu__activator"
      v-on:click="activate"
      ref="activator"
    )
      slot(name="activator")

    component(
      v-bind:is="transition"
      v-bind:origin="origin"
    )
      div(
        ref="content"
        class="menu__content"
        v-on:click="isActive = false"
        v-show="isActive"
        v-bind:style="styles"
      )
        slot
</template>

<script>
  import Toggleable from '../../mixins/toggleable'

  export default {
    name: 'menu',

    mixins: [Toggleable],

    data () {
      return {
        dimensions: {
          activator: {},
          content: {},
          list: {},
          item: {}
        },
        position: {
          top: 0,
          left: 0
        },
        minWidth: 'auto'
      }
    },

    props: {
      auto: Boolean,
      left: Boolean,
      bottom: Boolean,
      right: Boolean,
      maxHeight: {
        type: [String, Number],
        default: 'auto'
      },
      offsetX: Boolean,
      offsetY: Boolean,
      origin: {
        type: String,
        default: 'top left'
      },
      top: Boolean,
      transition: {
        type: String,
        default: 'v-menu-transition'
      }
    },

    computed: {
      direction () {
        return {
          'vertical': (this.bottom || this.auto) ? 'bottom' : 'top',
          'horizontal': (this.right || this.auto) ? 'right' : 'left'
        }
      },

      offset () {
        return {
          'top': this.offsetY ? this.dimensions.activator.height : 0,
          'left': this.offsetX ? this.dimensions.activator.width : 0
        }
      },

      styles () {
        return {
          top: `${this.position.top}px`,
          left: `${this.position.left}px`,
          maxHeight: isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`,
          minWidth: `${this.minWidth}px`
        }
      }
    },

    mounted () {
      // Move content to beginning of the document (easier to re-position later).
      document.body.insertBefore(this.$refs.content, document.body.firstChild)
    },

    methods: {

      activate () {
        this.isActive = true
        this.updateDimensions()
        this.updatePosition()
      },

      updateDimensions () {
        this.$refs.content.style.display = 'block'
        this.dimensions = {
          'activator': this.rect(this.$refs.activator),
          'content': this.rect(this.$refs.content),
          'list': this.rect(this.$refs.content, '.list'),
          'item': this.rect(this.$refs.content, '.list__item')
        }
        this.$refs.content.style.display = 'none'
      },

{'fraction_non_alphanumeric': 0.14638250140213124, 'fraction_numerical': 0.0014956066554496167, 'mean_word_length': 1.6511397423191279, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, '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': '7633693', 'n_tokens_mistral': 1655, 'n_tokens_neox': 1619, 'n_words': 302}