InflectionButton.vue

<!-- eslint-disable -->
<template>
 
      <span class="inflection-wrapper" v-if="inflected">
    
    <v-btn v-if="!($store.state.inflectionExpanded && $route.name)" class="show-inflection" x-small text rounded @click.native="toggle" :class="$vuetify.breakpoint.name">
    <span>{{inflection_expanded? $t('article.hide_inflection', $parent.content_locale):$t('article.show_inflection', $parent.content_locale)}}</span><span class = "inflection-arrow"><v-icon x-small right>{{this.inflection_expanded?  "remove_circle" : "add_circle"}}</v-icon></span>
    </v-btn>
      <div class="inflection-canvas" v-if="inflection_expanded || always_expand">
        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
      </div>

</span>
</template>

<script>
  /* eslint-disable */
import inflectionTable from 'inflection-table'

export default {
  name: 'InflectionButton',
  props: {
    lemmas: Array,
    dictionary: String,
    article_id: Number
  },
  computed: {
    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
    },
    always_expand: function() {
      return  !this.$parent.$parent.collapsed && this.$store.state.inflectionExpanded && this.$route.name
    }
  },
  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;
  margin-left: 4px !important;
}


@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;
  padding-bottom: 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>