Implement frontend features

README.md

@@ -1,4 +1,7 @@
-# StructorVerborum [![CodeFactor](https://www.codefactor.io/repository/github/hunter-richardson/structorverborum/badge)](https://www.codefactor.io/repository/github/hunter-richardson/structorverborum)
+# StructorVerborum [![CodeFactor](https://www.codefactor.io/repository/github/hunter-richardson/structorverborum/badge)](https://www.codefactor.io/repository/github/hunter-richardson/structorverborum)  ![GitHub Issues](https://img.shields.io/github/issues-raw/hunter-richardson/structorVerborum?style=for-the-badge&logo=github)
+
+
+
 
 This template should help get you started developing with Vue 3 in Vite.
 

package.json

@@ -46,6 +46,8 @@
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.11.0",
+    "amphtml-validator": "^1.0.38",
+    "classifyx": "^1.1.0",
     "codeql-agent": "^0.3.4",
     "cypress": "^13.7.2",
     "eslint": "^8.57.0",
@@ -61,6 +63,8 @@
     "vite": "^5.2.8",
     "vite-plugin-vue-devtools": "^7.0.25",
     "vitest": "^1.4.0",
-    "vue-tsc": "^2.0.11"
+    "vue-horizontal-scroll": "^0.2.4",
+    "vue-tsc": "^2.0.11",
+    "vuedraggable": "^4.1.0"
   }
 }

src/facies/404.vue

@@ -30,15 +30,14 @@
   })
 </script>
 
-<template>
-  <v-app>
-    <v-container>
-      <v-empty-state :text="lingua === 'anglica' ? 'The requested resource is missing' : 'Quaerenda res abest'"
-                     :title="lingua === 'anglica' ? 'Absent page' :  'Absens pagina'"
-                     :headline="lingua === 'anglica' ? 'Oops, 404!' : 'Vae CDIV!'"
-                     @click:action='recipe();' image='/res/picta/spqr.png'
-                     :actionText="lingua === 'anglica' ? 'Go back' : 'Recipe'"
-                     icon='arrow_back' />
-    </v-container>
-  </v-app>
+<template lang='vue'>
+	<v-app>
+		<v-container>
+			<v-empty-state :text="lingua === 'anglica' ? 'The requested resource is missing' : 'Quaerenda res abest'"
+				:title="lingua === 'anglica' ? 'Absent page' :  'Absens pagina'"
+				:headline="lingua === 'anglica' ? 'Oops, 404!' : 'Vae CDIV!'" @click:action='recipe();'
+				image='/res/picta/spqr.png' :actionText="lingua === 'anglica' ? 'Go back' : 'Recipe'"
+				icon='arrow_back' />
+		</v-container>
+	</v-app>
 </template>

src/facies/calculare.vue

@@ -26,6 +26,7 @@
         praevii: nihil,
         praesentes: nihil,
         nihil: nihil,
+
         actus: [
           [ ' I ', ' C ', ' · ', ' + ' ],
           [ ' V ', ' D ', ' : ', ' - ' ],

src/facies/index.vue

@@ -24,6 +24,7 @@
   export default defineComponent({
     data () {
       return {
+        name: crustula.lingua === 'anglica' ? 'Phrase Factory' : 'Structor Verborum',
         annulus: '',
         locutionis: locutor.locutust(),
         referret: referretne(),
@@ -125,6 +126,7 @@
     },
 
     async mounted (): Promise<void> {
+      document.title = this.name;
       if (cocutor.edatur('assensus') === 'assensit') {
         this.crustula = {
           assensus: cocutor.edatur('assensus') ?? 'assensit',
@@ -140,7 +142,7 @@
   });
 </script>
 
-<template>
+<template lang='vue'>
   <template v-if="crustula.assensus === 'assensit'">
     <v-speed-dial id='crustula' location='bottom center' transition='fade-transition' open-on-click>
       <template v-slot:activator='{ props: activator }'>

src/facies/inflectere.vue

@@ -49,7 +49,11 @@
   const seligenda: string[] = [];
   const selecta: string[] = [];
 
+  const HorizontalScroll = require('vue-horizontal-scroll')
+
   export default defineComponent({
+    components: { HorizontalScroll },
+
     data () {
       return {
         anglica: lingua === 'anglica',
@@ -191,16 +195,20 @@
   });
 </script>
 
-<template>
+<template lang='vue'>
   <template v-if='verbum'>
     <Spectere v-model='verbum' @blur='verbum = undefined;' />
   </template>
   <template v-else>
-    <v-chip-group selected-class='text-primary'>
-      <v-chip v-for='seligendum in seligenda' :key='seligendum'
-              :text="anglica ? anglicum(seligendum) : seligendum" @change='cole();'
-              prepend-icon='category' filter />
-    </v-chip-group>
+    <div id='colamina'>
+      <horizontal-scroll>
+        <v-chip-group v-for='seligendum in seligenda' :key='seligendum'
+                      selected-class='text-primary'>
+          <v-chip :text="anglica ? anglicum(seligendum) : seligendum" @change='cole();'
+                  prepend-icon='category' filter />
+        </v-chip-group>
+      </horizontal-scroll>
+    </div>
     <template v-if="figura === 'actusAgendus'">
       <v-btn-toggle>
         <v-btn append-icon='subject' :text="anglica ? 'Noun' : 'Nomen'"

src/facies/loqui.vue

@@ -1,36 +1,63 @@
 <script lang='ts'>
   import { defineComponent } from 'vue';
+  import draggable from 'vuedraggable'
   import Gustularium from '../scriptura/gustularium';
   import Locutor from '../miscella/locutor';
   import Cocutor from '../miscella/cocutor';
 
   const locutor: Locutor = Locutor.se.ipse();
+  const cocutor: Cocutor = Cocutor.se.ipse();
+
+  const illustre: boolean = cocutor.edatur('facies') === 'illustre';
+
+  const Please = require('pleasejs');
+  const ClassifyX = require('classifyx')
 
   export default defineComponent({
+    component: { draggable },
+
     data () {
       return {
+        trahens: false,
+        pellucidum: ClassifyX({
+          opacity: 0.5,
+          background: Please.make_color({
+            value: illustre ? 0.25 : 0.75
+          })
+        }),
         lingua: Cocutor.se.ipse().edatur('lingua'),
         gustularium: new Gustularium({}),
         verba: locutor.verba,
       };
     },
 
     methods: {
+
       remove (unicum: symbol): void {
         locutor.removeatur(unicum);
       }
     }
   });
 </script>
 
-<template>
-  <v-snackbar :color='gustularium.color' :timeout='gustularium.vita' v-model='gustularium.visibile'>
-    { gustularium.nuntium }
-  </v-snackbar>
-  <v-chip-group>
-    <template v-for='verbum in verba'>
-      <v-chip :v-bind:key='verbum' @click:close='remove(verbum.unicum);' close-icon='remove'
-              :text='verbum.scriptum' selected-class='text-primary' />
-    </template>
-  </v-chip-group>
+<template lang='vue'>
+	<v-snackbar :color='gustularium.color' :timeout='gustularium.vita' v-model='gustularium.visibile'>
+		{ gustularium.nuntium }
+	</v-snackbar>
+	<v-chip-group id='locutio'>
+		<draggable v-model='verba' :ghost-class='pellucidum' @start='trahens = true' @end='trahens = false'>
+			<span :class="'mr-2'.concat(trahens ? 'cursor-grab' : 'cursor-grabbing')">
+				<template v-for='verbum in verba'>
+					<v-chip :v-bind:key='verbum' @click:close='remove(verbum.unicum);' close-icon='remove'
+						:text='verbum.scriptum' selected-class='text-primary' />
+				</template>
+</span>
+</draggable>
+</v-chip-group>
 </template>
+
+<style lang='css'>
+  .pellucidum {
+    opacity: 0.5;
+  }
+</style>

src/facies/numerare.vue

@@ -50,10 +50,10 @@
   });
 </script>
 
-<template>
-  <template v-if='numerus'>
-    <Specere v-model='numerus' @blur='numerus = undefined' />
-  </template>
+<template lang='vue'>
+	<template v-if='numerus'>
+		<Specere v-model='numerus' @blur='numerus = undefined' />
+	</template>
   <div class='text-center'>
     <v-card id='effectus' :text='romanus' />
     <template v-if='anglicus.numerator === 0'>

src/facies/quaerere.vue

@@ -114,7 +114,7 @@
   });
 </script>
 
-<template>
+<template lang='vue'>
   <Loqui />
   <template v-if='verbum'>
     <Specere v-model='verbum' @blur='verbum = undefined;' />
@@ -129,7 +129,7 @@
   <v-data-table :items-per-page='10' :loading='onerans' density='compact' :headers='columnae'>
     <template v-slot:headers='{ headers, isSorted, getSortIcon, toggleSort }'>
       <tr>
-        <template v-for='columna in columnae' :key='columna.key'>
+        <template v-for='columna in headers.flat()' :key='columna.key'>
           <td>
             <template v-if='isSorted(columna)'>
               <v-icon :icon='getSortIcon(columna)' />
@@ -154,21 +154,19 @@
       <v-skeleton-loader :loading='onerans' type='table-tbody'
                          :loadingText="anglica ? 'Loading words...' : 'Lemmae onerantur...'" />
     </template>
-    <template v-else>
-      <template v-for='lemma in lemmae' :key='lemma'>
-        <tr>
-          <td>{{ lemma.categoria }}</td>
-        </tr>
-        <tr>
-          <td>{{ lemma.scriptum }}</td>
-        </tr>
-        <tr>
-          <td>
-            <v-btn :text="anglica ? 'Open' : 'Refer'" :disabled='error' append-icon='open_in_full'
-                   @click='refer(lemma);' />
-          </td>
-        </tr>
-      </template>
+    <template v-else v-for='lemma in lemmae' :key='lemma'>
+      <tr>
+        <td>{{ lemma.categoria }}</td>
+      </tr>
+      <tr>
+        <td>{{ lemma.scriptum }}</td>
+      </tr>
+      <tr>
+        <td>
+          <v-btn :text="anglica ? 'Open' : 'Refer'" :disabled='error' append-icon='open_in_full'
+                  @click='refer(lemma);' />
+        </td>
+      </tr>
     </template>
   </v-data-table>
 </template>

src/facies/specere.vue

@@ -53,10 +53,10 @@
   });
 </script>
 
-<template>
-  <template v-if='eventus'>
-    <Inflectere v-model='eventus' @blur='eventus = undefined;' />
-  </template>
+<template lang='vue'>
+	<template v-if='eventus'>
+		<Inflectere v-model='eventus' @blur='eventus = undefined;' />
+	</template>
   <v-dialog v-if'verbum'>
     <v-card :title='verbum?.scriptum'>
       <span id='categoria'>{{ verbum?.categoria.capitalize() }}</span>

src/figura.ts

@@ -1,11 +1,13 @@
 import { useFavicon } from '@vueuse/core';
 import { createApp } from 'vue';
 import { createVuetify } from 'vuetify';
+import { md3 } from 'vuetify/blueprints';
 import Index from './facies/index.vue';
 
 useFavicon('/res/picta/favicon.png')
 
 export default createVuetify({
+  blueprint: md3,
   defaults: {
     global: {
       ripple: true,

src/scriptura/gustularium.ts

@@ -11,11 +11,11 @@ export default class Gustularium {
   readonly visibile: boolean;
 
   constructor (optanda: Optanda) {
-    const make_color = require('@types/pleasej').make_color;
+    const Please = require('pleasejs');
 
     this.nuntium = optanda.nuntium ?? '';
     this.vita = optanda.vita ?? 0;
-    this.color = optanda.color ?? make_color();
+    this.color = optanda.color ?? Please.make_color();
     this.visibile = !!optanda.vita && (optanda.vita > 0);
   }
 }