bux fixes, profile initials

src/render/components/input.js

@@ -3,8 +3,12 @@ import draggify from "./control/draggify.js";
 
 const Input = 
 {
-    setup()
+    props: ["person"],
+
+    setup(props)
     {
+        const initials = Vue.ref("");
+
         const recording = Vue.ref(false);
 
         const { elementX, elementY } =  draggify("input", 15);
@@ -13,7 +17,9 @@ const Input =
 
         window.mainApi.on("record", (status) => recording.value = status);
 
-        return { elementX, elementY, recording, leftSide, show };
+        Vue.watch(() => props.person, (c, _p) => initials.value = getInitials(c));
+
+        return { initials, elementX, elementY, recording, leftSide, show };
     },
 
     template: `
@@ -21,7 +27,7 @@ const Input =
             :style="{ top: elementY + 'px', left: elementX + 'px' }"
         >
 
-            <div id="input-icon"></div>
+            <div id="input-icon">{{ initials }}</div>
 
             <input 
                 id="input-text" type="text"
@@ -35,5 +41,17 @@ const Input =
         </div> `
 }
 
+function getInitials(name)
+{
+    let rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');
+
+    let initials = [...name.matchAll(rgx)] || [];
+
+    return (
+      (initials.shift()?.[1] || '') + (initials.pop()?.[1] || '')
+    ).toUpperCase();
+}
+
 export default Input;
 
+