Header.vue

<!-- eslint-disable -->
<template>
  <div>
    <h1 class="article_header" v-for="(lemma, index) in lemmas" :key="index">
      {{lemma.lemma}}{{index+1 < lemmas.length ? ',' : ''}} </h1>
      <details title="Klikk for å se bøyninger">
        <summary>{{group_list}}</summary>
        <div class="inflection">
          <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index">
            <h4>{{lemma.lemma}}</h4>
            <component  v-for="grp in Object.keys(lemma.inflection_groups)"
                        :key="grp.replace('/', '_')"
                        :is="grp.replace('/', '_')"
                        :dictionary="dictionary"
                        :standardisations="lemma.inflection_groups[grp]"></component>
          </div>
        </div>
      </details>
  </div>
</template>

<script>
  /* eslint-disable */
import helpers from '../utils/helpers.js'
import ADJ from './inflection/Adjective.vue'
import ADJ_adv from './inflection/AdjectiveAdv.vue'
import ADJ_masc_fem from './inflection/AdjectiveMF.vue'
import ADJ_masc_fem_fem from './inflection/AdjectiveMF_F.vue'
import DET from './inflection/Determinative.vue'
import DET_adj from './inflection/DeterminativeAdj.vue'
import PRON from './inflection/Pronoun.vue'
import NOUN from './inflection/Noun.vue'
import NOUN_reg_fem from './inflection/NounRegFem.vue'
import VERB from './inflection/Verb.vue'
import VERB_sPass from './inflection/VerbSPass.vue'

export default {
  name: 'Header',
  props: {
    lemmas: Array,
    dictionary: String
  },
  computed: {
    group_list: function() {
      return helpers.group_list(this.lemmas)
    },
    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])))
          }
        }
      )
    }
  },
  components: {
    ADJ,
    ADJ_adv,
    ADJ_masc_fem,
    ADJ_masc_fem_fem,
    DET,
    DET_adj,
    PRON,
    NOUN,
    NOUN_reg_fem,
    VERB,
    VERB_sPass
  }
}
</script>

<style >

summary {
  width: 30em;
}

.word-classification {
  text-decoration: underline dashed;
}

h1.article_header {
  display: inline;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  border: none;
  cursor: help;
  list-style: none;
  text-decoration: underline;
  text-decoration-style: dashed;
}

.inflection table {
  border-collapse: collapse;
  margin: 10px;
}

.inflection td, .inflection th {
  border: solid;
  border-width: 1px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
}


details > summary::-webkit-details-marker {
  display: none;
}

details > div {
  border-radius: 0 0 10px 10px;
  background-color: #eee;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

</style>