Correct front-end errors

src/facies/app.vue

@@ -208,8 +208,8 @@
     </v-app-bar>
     <v-tabs v-model='annulus' align-tabs='center' density='compact' grow hide-slider mandatory>
       <template v-for='annulus in annuli'>
-        <v-tab :value='annulus' selected-class='text-primary' density='compact'
-               :v-bind:key='annulus' :text='annulus.titula' tile />
+        <v-tab :value='annulus' :v-bind:key='annulus' selected-class='text-primary'
+               density='compact' :text='annulus.titula' tile />
       </template>
     </v-tabs>
     <v-tabs-window v-model='annulus'>

src/facies/calculare.vue

@@ -9,7 +9,7 @@
     romanus: string
   };
 
-  const numerus: Numerus | null = null;
+  const numerus = defineModel<Numerus>();
   const operator: string = '';
 
   const nihil: numeri = {

src/facies/inflectere.vue

@@ -8,7 +8,9 @@
 
   defineProps<{ id: Hoc; }>();
 
-  const eventus = defineModel<Eventus>();
+  const eventus = defineModel<Eventus>('eventus');
+  const verbum = defineModel<Verbum>('verbum');
+
   const categoria: string = eventus.value?.categoria ?? '';
   const agendum: Faciendum<Hoc> = eventus.value?.referendum as Faciendum<Hoc>;
   const tabula: Tabula<Hoc> | null = agendum?.putetur();
@@ -54,8 +56,8 @@
         selecta: selecta,
         verba: verba,
         eventus: eventus,
+        verbum: verbum,
         onerans: true,
-        verbum: null,
         et: {
           gradus: '',
           genus: ''
@@ -89,7 +91,7 @@
         if (this.figura === 'numeramenAgendum') {
           const referendum: Referendum = (this.agendum as Agenda.NumeramenAgendum).referatur(numeramen.numerium);
           if (referendum instanceof Numerus) {
-            this.verba = referendum as Numerus;
+            this.verbum = referendum as Numerus;
           } else if (referendum instanceof Agenda.NomenAgendum) {
             this.eventus = {
               referendum: referendum as Agenda.NomenAgendum,
@@ -113,10 +115,17 @@
         this.verbum = verbum;
       },
 
-      refer (eventus: Eventus): void {
-        this.eventus = eventus;
+      refer (eventus: {
+        referendum?: Referendum;
+        categoria: string;
+      }): void {
+        if (eventus.referendum) {
+          this.eventus = {
+            referendum: eventus.referendum,
+            categoria: eventus.categoria
+          };
+        };
       }
-
     },
 
     async mounted (): Promise<void> {
@@ -134,22 +143,23 @@
 
 <template>
   <template v-if='verbum'>
-    <Spectere v-model='verbum' @blur='verbum = null;' />
+    <Spectere v-model='verbum' @blur='verbum = undefined;' />
   </template>
   <template v-else>
     <v-chip-group selected-class='text-primary'>
       <template v-for='colamen in colamina'>
-        <v-chip :text="lingua === 'anglica' ? anglicum(Object.values(colamen).first()).toString() : Object.values(colamen).first().toString()"
+        <v-chip :v-bind:key='colamen'
+                :text="lingua === 'anglica' ? anglicum(Object.values(colamen).first()).toString() : Object.values(colamen).first().toString()"
                 @change='cole();' prepend-icon='category' filter />
       </template>
     </v-chip-group>
-    <v-data-table :items='verba' v-for='ullum in verba' :v-bind:key='ullum' :loading='onerans'
+    <v-data-table v-for='ullum in verba' :items='verba' :v-bind:key='ullum' :loading='onerans'
                   :headers='columnae' density='compact' items-per-page='10' item-selectable=false>
       <template v-if='onerans'>
         <v-skeleton-loader :loading-text="lingua === 'anglica' ? 'Loading words...' : 'Verba onerantur...'"
                            :loading='onerans' type='table-tbody' />
       </template>
-      <template v-else-if="figura === 'numeramenAgendum'">
+      <template v-if="figura === 'numeramenAgendum'">
         <v-btn :text="lingua === 'anglica' ? 'Open' : 'Refer'" append-icon='open_in_full'
                @click='numeramen(ullum as Numeramen);' />
       </template>
@@ -162,24 +172,24 @@
       <v-btn-toggle>
         <v-btn append-icon='subject' :text="lingua === 'anglica' ? 'Noun' : 'Nomen'" @click="refer({
           categoria: 'nomen',
-          referendum: (agendum as Agenda.ActusAgendus).nomen()
-        });" />
+  referendum: (agendum as Agenda.ActusAgendus).nomen() ?? undefined
+});" />
         <v-btn append-icon='person' :text="lingua === 'anglica' ? 'Agent (masculine)' : 'Actor'"
                @click="refer({
                 categoria: 'nomen',
-                referendum: (agendum as Agenda.ActusAgendus).actor('masculinum')
+                referendum: (agendum as Agenda.ActusAgendus).actor('masculinum') ?? undefined
               });" />
         <v-btn append-icon='person' :text="lingua === 'anglica' ? 'Agent (feminine)' : 'Actrix'"
                @click="refer({
                 categoria: 'nomen',
-                referendum: (agendum as Agenda.ActusAgendus).actor('femininum')
+                referendum: (agendum as Agenda.ActusAgendus).actor('femininum') ?? undefined
               });" />
       </v-btn-toggle>
     </template>
     <template v-else-if="figura === 'nomenFactum'">
       <v-btn append-icon='sprint' :text="lingua === 'anglica' ? 'Verb' : 'Actus'" @click="refer({
         categoria: 'actus',
-        referendum: (agendum as Agenda.NomenFactum).actus()
+        referendum: (agendum as Agenda.NomenFactum).actus() ?? undefined
       });" />
     </template>
     <template v-if="[
@@ -207,14 +217,14 @@
                   referendum: (agendum as Agenda.AdiectivumAgendum).probetur({
                     gradus: et.gradus,
                     genus: et.genus
-                  })
+                  }) ?? undefined
                 });" />
         </template>
         <template v-else-if="figura === 'incomparabile'">
           <v-btn append-icon='open_in_full'
                  :text="lingua === 'anglica' ? 'Substantiate' : 'Probetur'" @click="refer({
                   categoria: 'adiectivum',
-                  referendum: (agendum as Agenda.Incomparabile).probetur(et.genus)
+                  referendum: (agendum as Agenda.Incomparabile).probetur(et.genus) ?? undefined
                 });" />
         </template>
       </span>

src/facies/numerare.vue

@@ -5,7 +5,7 @@
   import Spectere from './specere.vue';
   import Cocutor from '../miscella/cocutor';
 
-  const numerus: Numerus | null = null;
+  const numerus = defineModel<Numerus>();
 
   export default defineComponent({
     data () {
@@ -46,8 +46,7 @@
 
 <template>
   <template v-if='numerus'>
-    <Specere v-model='numerus'
-             @blur='numerus = null' />
+    <Specere v-model='numerus' @blur='numerus = undefined' />
   </template>
   <div class='text-center'>
     <v-card id='effectus' :text='romanus' />
@@ -56,15 +55,12 @@
     </template>
   </div>
   <div class='text-center'>
-    <v-number-input @change='effiat();' id='integer'
-                    :rules='valida(anglicus.integer)'
-                    validateOn='input' v-model='anglicus.integer'
-                    autofocus clearable flat reverse />
+    <v-number-input @change='effiat();' id='integer' :rules='valida(anglicus.integer)'
+                    validateOn='input' v-model='anglicus.integer' autofocus clearable flat
+                    reverse />
     <v-card text=' + ' />
-    <v-number-input @change='effiat();' id='numerator'
-                    :rules='valida(anglicus.numerator)'
-                    validateOn='input' v-model='anglicus.numerator'
-                    clearable flat />
+    <v-number-input @change='effiat();' id='numerator' :rules='valida(anglicus.numerator)'
+                    validateOn='input' v-model='anglicus.numerator' clearable flat />
     <v-card :text="' ÷ '.concat(anglicus.denominator.toString())" />
   </div>
 </template>

src/facies/quaerere.vue

@@ -1,27 +1,33 @@
 <script lang='ts'>
   import { defineComponent } from 'vue';
-  import Dictionarium, { type Lemma, type Eventus } from '../miscella/dictionarium';
+  import Dictionarium, { type Lemma, type Eventus, type Quaerenda } from '../miscella/dictionarium';
   import { anglicum, categoriae } from '../miscella/enumerationes';
   import Inflectere from './inflectere.vue';
   import Specere from './specere.vue';
   import Loqui from './loqui.vue';
   import Cocutor from '../miscella/cocutor';
+  import type { Verbum } from '../praebeunda/verba';
 
   const dictionarium: Dictionarium = Dictionarium.se.ipse();
   const lingua: string | undefined = Cocutor.se.ipse().edatur('lingua');
 
+  const lemmae: Lemma[] = [];
+  const verbum = defineModel<Verbum>('verbum');
+  const eventus = defineModel<Eventus>('eventus');
+  const quaerenda: Quaerenda = {
+    categoriae: [],
+    pars: ''
+  };
+
   export default defineComponent({
     data () {
       return {
         lingua: lingua,
-        lemmae: [],
+        lemmae: lemmae,
         onerans: true,
-        verbum: null,
-        eventus: null,
-        quaeranda: {
-          categoriae: [],
-          pars: ''
-        },
+        verbum: verbum.value,
+        eventus: eventus.value,
+        quaerenda: quaerenda,
 
         categoriae: categoriae.map(categoria => {
           return {
@@ -51,20 +57,20 @@
     methods: {
       async sarci (): Promise<void> {
         this.onerans = true;
-        this.lemmae = await dictionarium.quaeratur(this.quaerenda)
-          .then(() => this.onerans = false);
+        this.lemmae = await dictionarium.quaeratur(this.quaerenda);
+        return new Promise(() => this.onerans = false);
       },
 
       async omnes (): Promise<void> {
         this.onerans = true;
-        this.quaeranda.categoriae = [];
-        this.quaeranda.pars = '';
+        this.quaerenda.categoriae = [];
+        this.quaerenda.pars = '';
 
         this.sarci();
       },
 
       removeApices (): void {
-        this.quaeranda.pars = this.quaeranda.pars.toLowerCase().removeMacra();
+        this.quaerenda.pars = this.quaerenda.pars.toLowerCase().removeMacra();
       },
 
       valida (): boolean | string {
@@ -80,14 +86,16 @@
       },
 
       async refer (lemma: Lemma): Promise<void> {
-        const eventus: Eventus = await dictionarium.referatur(lemma);
-        if ([
-          'actus', 'adiectiva', 'adverbia',
-          'nomen', 'numeramen', 'pronomen'
-        ].includes(eventus.categoria)) {
-          this.eventus = eventus;
-        } else {
-          this.verbum = eventus.referendum;
+        const eventus: Eventus | null = await dictionarium.referatur(lemma);
+        if (eventus) {
+          if ([
+            'actus', 'adiectiva', 'adverbia',
+            'nomen', 'numeramen', 'pronomen'
+          ].includes(eventus.categoria)) {
+            this.eventus = eventus;
+          } else {
+            this.verbum = eventus.referendum as Verbum;
+          }
         }
       }
     }
@@ -97,10 +105,10 @@
 <template>
   <Loqui />
   <template v-if='verbum'>
-    <Specere v-model='verbum' @blur='verbum = null;' />
+    <Specere v-model='verbum' @blur='verbum = undefined;' />
   </template>
   <template v-else-if='eventus'>
-    <Inflectere v-model='eventus' @blur='eventus = null;' />
+    <Inflectere v-model='eventus' @blur='eventus = undefined;' />
   </template>
   <div class='text-center'>
     <v-btn append-icon='search' @click='sarci();' :disabled='onerans'
@@ -115,14 +123,14 @@
               <v-icon :icon='getSortIcon(columna)' />
             </template>
             <template v-if="columna.key === 'lemma'">
-              <v-text-field :label='columna.title' v-model='quaeranda.pars' :disabled='onerans'
+              <v-text-field :label='columna.title' v-model='quaerenda.pars' :disabled='onerans'
                             :loading='onerans' validate-on='input' :rules='valida()'
                             id='quaerenda.pars' density='compact' @blur='removeApices();' autofocus
                             flat single-line />
             </template>
             <template v-else-if="columna.key === 'categoriae'">
               <v-select :loading='onerans' density='compact' id='quaerenda.categoriae'
-                        v-model='quaeranda.categoriae' :disabled='onerans' :label='columna.title'
+                        v-model='quaerenda.categoriae' :disabled='onerans' :label='columna.title'
                         :items='categoriae' chips flat multiple open-on-clear />
             </template>
             <span class='mr-2 cursor-pointer' @click='() => toggleSort(columna)' />

src/facies/specere.vue

@@ -4,33 +4,45 @@
   import Locutor from '../miscella/locutor';
   import Inflectere from './inflectere.vue';
   import Cocutor from '../miscella/cocutor';
+  import type { Eventus } from '../miscella/dictionarium';
 
-  const verbum = defineModel<Verbum>();
+  const verbum = defineModel<Verbum>('verbum');
+  const eventus = defineModel<Eventus>('eventus');
 
   export default defineComponent({
     data () {
       return {
-        verbum: verbum,
+        verbum: verbum.value,
+        eventus: eventus.value,
         lingua: Cocutor.se.ipse().edatur('lingua'),
         multiplex: verbum.value instanceof Multiplex,
         valores: (verbum.value as Multiplex)?.valores() ?? [],
         locutor: Locutor.se.ipse(),
-        eventus: null
+        eventus: eventus
       };
     },
 
     methods: {
-      refer (): void {
+      async refer (): Promise<void> {
         switch (this.verbum?.categoria) {
           case 'actus':
             const actus: Actus = this.verbum as Actus;
             if (actus.modus === 'participium') {
-              this.eventus = actus.participialis();
+              this.eventus = {
+                referendum: await actus.participialis(),
+                categoria: 'adiectivum'
+              };
             }
             break;
           case 'numerus':
             const numerus: Numerus = this.verbum as Numerus;
-            this.eventus = numerus.numeramen();
+            const agendum = await numerus.numeramen();
+            if (agendum) {
+              this.eventus = {
+                referendum: agendum,
+                categoria: 'numeramen'
+              };
+            }
             break;
         }
       }
@@ -40,7 +52,7 @@
 
 <template>
   <template v-if='eventus'>
-    <Inflectere v-model='eventus' @blur='eventus = null;' />
+    <Inflectere v-model='eventus' @blur='eventus = undefined;' />
   </template>
   <v-dialog v-if'verbum'>
     <v-card :title='verbum?.scriptum'>
@@ -55,7 +67,7 @@
         <template v-if='verbum?.paratumne()'>
           <v-btn icon='chat_add_on'
                  :text="lingua === 'anglica' ? 'Add this to my phrase' : 'Adde hoc locutioni'"
-                 @click='locutor.addatur(verbum);' />
+                 @click='locutor.addatur(verbum as Verbum);' />
         </template>
         <template v-if="verbum?.categoria === 'numerus'">
           <v-btn icon='quick_reference' @click='refer();'