Correct front-end errors

src/facies/calculare.vue

@@ -1,5 +1,5 @@
 <script lang='ts'>
-  import { defineComponent } from 'vue';
+  import { defineComponent, defineModel } from 'vue';
   import Numeral from '../miscella/numeral';
   import { Numerus } from '../praebeunda/verba';
   import Spectere from './specere.vue';

src/facies/numerare.vue

@@ -1,22 +1,32 @@
 <script lang='ts'>
-  import { defineComponent } from 'vue';
+  import { defineComponent, defineModel } from 'vue';
   import Numeral from '../miscella/numeral';
   import { Numerus } from '../praebeunda/verba';
   import Spectere from './specere.vue';
   import Cocutor from '../miscella/cocutor';
 
   const numerus = defineModel<Numerus>();
+  const cocutor: Cocutor = Cocutor.se.ipse();
 
   export default defineComponent({
     data () {
       return {
         romanus: '',
+        lingua: cocutor.edatur('lingua') === 'anglica',
         numerus: numerus,
         anglicus: {
           integer: 0,
           numerator: 0,
           denominator: 12
-        }
+        },
+
+        validator: [
+          (anglicus: number): boolean | string => {
+            const error: string = this.lingua ?
+              'Only Roman numerals allowed' : 'Romani numeri soli licuntur';
+            return Number.isInteger(anglicus) || error;
+          }
+        ]
       };
     },
 
@@ -29,13 +39,7 @@
         if (this.anglicus.numerator === 0) {
           this.numerus = Numerus.numerator(this.anglicus.integer);
         }
-      },
-
-      valida (anglicus: number): boolean | string {
-        const error: string = Cocutor.se.ipse().edatur('lingua') === 'anglica' ?
-              'Only Roman numerals allowed' : 'Romani numeri soli licuntur';
-        return Number.isInteger(anglicus) || error;
-      },
+      }
     },
 
     mounted(): void {
@@ -55,12 +59,11 @@
     </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='validator' 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='validator' validateOn='input'
+                    v-model='anglicus.numerator' clearable flat />
     <v-card :text="' ÷ '.concat(anglicus.denominator.toString())" />
   </div>
 </template>

src/facies/quaerere.vue

@@ -1,12 +1,13 @@
 <script lang='ts'>
-  import { defineComponent } from 'vue';
+  import { defineComponent, defineModel } from 'vue';
   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';
+  import { VDataTableHeaders } from 'vuetify/components';
 
   const dictionarium: Dictionarium = Dictionarium.se.ipse();
   const lingua: string | undefined = Cocutor.se.ipse().edatur('lingua');
@@ -25,10 +26,10 @@
         lingua: lingua,
         lemmae: lemmae,
         onerans: true,
+        error: false,
         verbum: verbum.value,
         eventus: eventus.value,
         quaerenda: quaerenda,
-
         categoriae: categoriae.map(categoria => {
           return {
             title: (lingua === 'anglica' ? anglicum(categoria) : categoria).capitalize(),
@@ -38,17 +39,34 @@
 
         columnae: [
           {
-            title: lingua === 'anglica' ? 'Term' : 'Lemma',
-            key: 'lemma',
-            removable: false,
-            sortable: true,
-            align: 'start'
+            latinum: 'lemma',
+            anglicum: 'term',
+            cultor: (verbum: Verbum, quaerendum: string): boolean => {
+              return verbum.scriptum.includes(quaerendum);
+            }
           }, {
-            title: lingua === 'anglica' ? 'Categories' : 'Categoriae',
-            key: 'categoriae',
-            removable: false,
-            sortable: true,
-            align: 'start'
+            latinum: 'categoriae',
+            anglicum: 'categories',
+            cultor: (verbum: Verbum, selecta: string[]): boolean => {
+              return selecta.includes(verbum.categoria);
+            }
+          }
+        ].map(columna => {
+          return {
+            title: (lingua === 'anglica' ? columna.anglicum : columna.latinum).capitalize(),
+            filter: columna.cultor,
+            key: columna.latinum
+          };
+        }),
+
+
+        validator: [
+          (pars: string): boolean | string => {
+            const licta: RegExp = /[āabcdēefghīijklmnōopqrstūuvxȳyz\|]/;
+            const validum: boolean = licta.test(pars.toLowerCase());
+            const error: string = lingua === 'anglica' ?
+              'Only Latin letters allowed' : 'Latinae litterae solae licuntur';
+            return validum || error;
           }
         ]
       };
@@ -70,19 +88,12 @@
       },
 
       removeApices (): void {
-        this.quaerenda.pars = this.quaerenda.pars.toLowerCase().removeMacra();
-      },
-
-      valida (): boolean | string {
-        const licta: RegExp = /[āabcdēefghīijklmnōopqrstūuvxȳyz\|]/;
-        const validum: boolean = licta.test(this.quaerenda.pars.toLowerCase());
-        if (!validum) {
-          this.onerans = false;
+        if (this.validator[ 0 ](this.quaerenda.pars) === true) {
+          this.quaerenda.pars = this.quaerenda.pars.toLowerCase().removeMacra();
+          this.error = false;
+        } else {
+          this.error = true;
         }
-
-        const error: string = lingua === 'anglica' ?
-          'Only Latin letters allowed' : 'Latinae litterae solae licuntur';
-        return validum || error;
       },
 
       async refer (lemma: Lemma): Promise<void> {
@@ -124,7 +135,7 @@
             </template>
             <template v-if="columna.key === 'lemma'">
               <v-text-field :label='columna.title' v-model='quaerenda.pars' :disabled='onerans'
-                            :loading='onerans' validate-on='input' :rules='valida()'
+                            :loading='onerans' validate-on='input' :rules='validator'
                             id='quaerenda.pars' density='compact' @blur='removeApices();' autofocus
                             flat single-line />
             </template>
@@ -152,8 +163,8 @@
         </tr>
         <tr>
           <td>
-            <v-btn :text="lingua === 'anglica' ? 'Open' : 'Refer'" append-icon='open_in_full'
-                   @click='refer(lemma);' />
+            <v-btn :text="lingua === 'anglica' ? 'Open' : 'Refer'" :disabled='error'
+                   append-icon='open_in_full' @click='refer(lemma);' />
           </td>
         </tr>
       </template>