code cosmetics, finish 2-way linking in sl-model, linting

Makefile

@@ -8,11 +8,14 @@ all: backend frontend
 backend:
 	cargo build --release
 
-frontend:
+frontend: frontend_lint
 	cd ui && \
 		npm install && \
 		npm run build
 
+frontend_lint:
+	cd ui && npm run lint
+
 clean:
 	rm -r target
 	rm -r ui/node_modules ui/dist

ui/.eslintignore

@@ -0,0 +1 @@
+**/*.config.js

ui/src/App.vue

@@ -7,6 +7,7 @@
 
 <style lang="scss">
 @import "../node_modules/normalize.css/normalize.css";
+@import "../node_modules/@shoelace-style/shoelace/dist/shoelace/shoelace.css";
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

ui/src/main.ts

@@ -1,27 +1,35 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
-
-import "@shoelace-style/shoelace/dist/shoelace/shoelace.css";
-import { defineCustomElements, setAssetPath } from "@shoelace-style/shoelace";
+import {
+  defineCustomElements,
+  setAssetPath,
+  SlInput
+} from "@shoelace-style/shoelace";
 import { VNode } from "vue/types/umd";
 import { DirectiveBinding } from "vue/types/options";
 
-setAssetPath(`${window.location.origin}/${process.env.VUE_APP_ASSET_PATH}/`);
+// TODO: Remove when UI settles!
 defineCustomElements();
-
-interface SlInput extends HTMLElement {
-  value: string;
-}
+setAssetPath(`${window.location.origin}/${process.env.VUE_APP_ASSET_PATH}/`);
 
 Vue.directive("sl-model", {
-  inserted: (element: Element, binding: DirectiveBinding, vnode) => {
+  inserted: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
     element.addEventListener("slInput", event => {
-      const val = (event?.srcElement as SlInput | undefined)?.value;
-      if (val) {
-        (vnode as any).context[binding.expression] = val;
+      const slElement = event?.srcElement as
+        | typeof SlInput.prototype
+        | undefined;
+      const value = slElement?.value;
+      if (value) {
+        vnode.context?.$set(vnode.context, binding.expression, value);
       }
     });
+  },
+  update: (element: Element, binding: DirectiveBinding, vnode: VNode) => {
+    const slElement = element as typeof SlInput.prototype | undefined;
+    if (slElement) {
+      slElement.value = vnode.context?.$data[binding.expression];
+    }
   }
 });