InflectionButton.vue

<!-- eslint-disable -->
<template>
 
      <div class="inflection-wrapper" v-if="inflected && !$parent.collapsed">
    
    <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
    <span>{{this.inflection_expanded? $t('article.hide_inflection'):$t('article.show_inflection')}}</span><span class = "inflection-arrow"><v-icon right>{{this.inflection_expanded?  "expand_less" : "expand_more"}}</v-icon></span>
    </v-btn>
      <div class="inflection-canvas" v-if="inflection_expanded">
        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
      </div>

</div>
</template>

<script>
  /* eslint-disable */
import helpers from '../utils/helpers.js'

import inflectionTable from 'inflection-table'

export default {
  name: 'InflectionButton',
  props: {
    lemmas: Array,
    dictionary: String,
    article_id: Number
  },
  computed: {
    group_list: function() {
      return helpers.group_list(this.lemmas, this.dictionary)
    },
    inflection_classes: function() {
      let inf_classes = new Set()
      let ureg = false
      this.lemmas.forEach((lemma, i) => {

           if (lemma.inflection_class) inf_classes.add(lemma.inflection_class)
           else ureg = true

      })
      if (inf_classes.size){

      let class_array = Array.from(inf_classes).sort()
      if (ureg) class_array.push("ureg.")
      let class_list
      if (class_array.length < 3) {
        class_list = class_array.join(" og ")
      }
      else {
        class_list = class_array.slice(0, -1).join(", ") + " og " + class_array[class_array.length -1]
      }

      return " ("+ class_list +")"
      }
    },
    inflection_groups_by_lemma: function() {
      let components = Object.keys(this.$options.components)
      return this.lemmas.map(
        function(lemma_){
          let inflection_groups = lemma_.paradigm_info.reduce((acc, std) =>  Object.assign(acc, {[std.inflection_group]: []}), {})
          lemma_.paradigm_info.forEach(std => inflection_groups[std.inflection_group].push(std))
          return {
            lemma: lemma_.lemma,
            inflection_groups: Object.fromEntries(Object.entries(inflection_groups).filter(e => components.includes(e[0].replace('/', '_'))))
          }
        }
      )
    },
    lemmas_with_word_class_and_lang: function() {
      return this.lemmas.map(lemma => Object.assign({language: this.dictionary == 'bm' ? 'nob' : 'nno',
                                                     word_class: lemma.paradigm_info[0].inflection_group.split('_')[0]}, lemma))
    },
    inflected: function() {
      return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
    },
  },
  components: {
    inflectionTable
  },
  data: function() {
    return {
      inflect_reported: false,
      inflection_expanded: false
    }
  },
  methods: {
    toggle: function() {
      this.inflection_expanded = !this.inflection_expanded
      if (! this.inflect_reported) {
        this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
      }
      this.inflect_reported = true
      
    }
  }
}

</script>

<style>
.show-inflection .v-icon {
  color: var(--v-primary-base) !important;
}

.inflection-arrow {
  position: absolute;
  right: -4px;
  margin-left: 3px;
  font-size: 10px;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.inflection-canvas {
  overflow-x: auto;
  /*position: absolute;*/
  z-index: 5;
  background-color: rgba(255, 255, 255, 0);
  /*max-width: 100vw;*/
  padding-top: 10px;
}


.inflection-wrapper {
  color: var(--v-text-base);
  font-size: 14px;
  margin-top: 10px;
}


.context {
  color: var(--v-primary-lighten4) !important;
}

div.lemma {
  display: none;
}

table {
  border-collapse: collapse;
  margin-top: 5px;
}

th, td {
  border: solid 2px var(--v-button-darken1);
  padding: 5px;
}

th {
  background-color: var(--v-button-base);
}

.infl-label {
    text-align: center;
    vertical-align: top;
}


td.hilite {
    background-color: var(--v-tertiary-base);
    text-align: center
}

</style>