ui: harden vue linting

homeland-live · Oct 30, 2024 · edebaa3 · edebaa3
1 parent 0a5a8e5
commit edebaa3
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 173 deletions.
diff --git a/ui/.eslintrc.cjs b/ui/.eslintrc.cjs
@@ -4,7 +4,7 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 module.exports = {
   root: true,
   extends: [
-    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/eslint-config-typescript/recommended',
     '@vue/airbnb',

diff --git a/ui/src/components/HexColorPicker.vue b/ui/src/components/HexColorPicker.vue
@@ -1,11 +1,12 @@
 <template>
   <ColorPicker
+    v-model:pure-color="model"
     format="hex"
     shape="circle"
     disable-alpha
     disable-history
-    v-model:pureColor="model"
-    @pureColorChange="change" />
+    @pure-color-change="change"
+  />
 </template>
 
 <script lang="ts">
@@ -15,11 +16,11 @@ import 'vue3-colorpicker/style.css';
 
 export default defineComponent({
   name: 'HexColorPicker',
-  emits: ['change'],
   components: { ColorPicker },
   props: {
     value: { type: String, required: true },
   },
+  emits: ['change'],
   data() {
     return {
       model: ref<string>(this.value),

diff --git a/ui/src/components/InfoCard.vue b/ui/src/components/InfoCard.vue
@@ -24,11 +24,11 @@ import TimeAgo from '@/components/TimeAgo.vue';
 
 export default defineComponent({
   name: 'InfoCard',
+  components: { TimeAgo },
   props: {
     title: { type: String, required: true },
     obj: { type: Object as PropType<Record<string, unknown>>, default: () => ({}) },
   },
-  components: { TimeAgo },
   methods: {
     isTime(v: unknown): boolean {
       return typeof v === 'string' && DateTime.fromISO(v).isValid;

diff --git a/ui/src/components/MainHeader.vue b/ui/src/components/MainHeader.vue
@@ -9,10 +9,14 @@
       <CCollapse class="navbar-collapse" :visible="visible">
         <CNavbarNav class="me-auto" as="ul">
           <CNavItem as="li">
-            <router-link to="/dashboard" class="nav-link">Dashboard</router-link>
+            <router-link to="/dashboard" class="nav-link">
+              Dashboard
+            </router-link>
           </CNavItem>
           <CNavItem as="li">
-            <router-link to="/about" class="nav-link">About</router-link>
+            <router-link to="/about" class="nav-link">
+              About
+            </router-link>
           </CNavItem>
         </CNavbarNav>
         <NodeListMenu @toast="onToast" @select="nodeStore.setActiveNode" />
@@ -39,7 +43,6 @@ import type { Toast } from '@/types/coreui';
 
 export default defineComponent({
   name: 'MainHeader',
-  emits: ['toast'],
   components: {
     CNavbar,
     CContainer,
@@ -50,6 +53,7 @@ export default defineComponent({
     CNavItem,
     NodeListMenu,
   },
+  emits: ['toast'],
   data() {
     return {
       visible: ref<boolean>(false),
@@ -60,13 +64,13 @@ export default defineComponent({
       useNodeStore, // sets this.nodeStore
     ),
   },
+  mounted() {
+    this.nodeStore.init();
+  },
   methods: {
     onToast(toast: Toast) {
       this.$emit('toast', toast);
     },
   },
-  mounted() {
-    this.nodeStore.init();
-  },
 });
 </script>
diff --git a/ui/src/components/NodeListMenu.vue b/ui/src/components/NodeListMenu.vue
@@ -15,8 +15,11 @@
           class="dropdown-item list-group-item list-group-item-action"
           :class="{ active: nodeStore.activeNode?.id === n.id }"
           type="button"
-          @click="onSelect(n)">
-          <p class="mb-1">{{ n.name }}</p>
+          @click="onSelect(n)"
+        >
+          <p class="mb-1">
+            {{ n.name }}
+          </p>
           <small class="text-muted d-flex flex-row-reverse">{{ n.ipv4 }}</small>
         </button>
       </CListGroup>
@@ -28,7 +31,8 @@
       :node="{}"
       @toast="onToast"
       @upsert="onSelect"
-      @close="hideUpsertModal" />
+      @close="hideUpsertModal"
+    />
   </teleport>
 </template>
 
@@ -47,14 +51,14 @@ import { useNodeStore } from '@/stores/node';
 
 export default defineComponent({
   name: 'NodeListMenu',
-  emits: ['toast', 'select'],
   components: {
     CDropdown,
     CDropdownToggle,
     CDropdownMenu,
     CListGroup,
     NodeUpsertModal,
   },
+  emits: ['toast', 'select'],
   data() {
     return {
       isUpsertModalVisible: ref<boolean>(false),
@@ -65,6 +69,9 @@ export default defineComponent({
       useNodeStore, // sets this.nodeStore
     ),
   },
+  mounted() {
+    this.nodeStore.init();
+  },
   methods: {
     showUpsertModal() {
       this.isUpsertModalVisible = true;
@@ -79,8 +86,5 @@ export default defineComponent({
       this.$emit('toast', toast);
     },
   },
-  mounted() {
-    this.nodeStore.init();
-  },
 });
 </script>
diff --git a/ui/src/components/NodeUpsertModal.vue b/ui/src/components/NodeUpsertModal.vue
@@ -1,22 +1,29 @@
 <template>
   <BaseModal ref="modal" @close="$emit('close')">
-    <template v-slot:title>
-      <template v-if="isCreating">Create new</template>
-      <template v-else>Edit</template>
+    <template #title>
+      <template v-if="isCreating">
+        Create new
+      </template>
+      <template v-else>
+        Edit
+      </template>
       node
     </template>
-    <template v-slot:body>
+    <template #body>
       <div class="row mb-3">
         <div class="col-3">
           <span>Name:</span>
         </div>
         <div class="col-9">
           <input
+            v-model.trim="model.name"
             class="form-control form-control-sm"
             :class="{ 'is-invalid': errors.name }"
-            v-model.trim="model.name"
-            @blur="onBlur('name')" />
-          <div class="invalid-feedback d-flex flex-row-reverse">{{ errors.name }}</div>
+            @blur="onBlur('name')"
+          />
+          <div class="invalid-feedback d-flex flex-row-reverse">
+            {{ errors.name }}
+          </div>
         </div>
       </div>
       <div class="row mb-3">
@@ -25,19 +32,28 @@
         </div>
         <div class="col-9">
           <input
+            v-model.trim="model.ipv4"
             class="form-control form-control-sm"
             :class="{ 'is-invalid': errors.ipv4 }"
-            v-model.trim="model.ipv4"
-            @blur="onBlur('ipv4')" />
-          <div class="invalid-feedback d-flex flex-row-reverse">{{ errors.ipv4 }}</div>
+            @blur="onBlur('ipv4')"
+          />
+          <div class="invalid-feedback d-flex flex-row-reverse">
+            {{ errors.ipv4 }}
+          </div>
         </div>
       </div>
     </template>
-    <template v-slot:footer>
-      <button type="button" class="btn btn-light" @click="close">Close</button>
+    <template #footer>
+      <button type="button" class="btn btn-light" @click="close">
+        Close
+      </button>
       <button type="button" class="btn btn-primary" @click="upsert">
-        <template v-if="isCreating">Create</template>
-        <template v-else>Update</template>
+        <template v-if="isCreating">
+          Create
+        </template>
+        <template v-else>
+          Update
+        </template>
       </button>
     </template>
   </BaseModal>
@@ -52,11 +68,11 @@ import { useNodeStore } from '@/stores/node';
 
 export default defineComponent({
   name: 'NodeUpsertModal',
-  emits: ['upsert', 'toast', 'close'],
   components: { BaseModal },
   props: {
     node: { type: Object as PropType<Partial<Node>>, required: true },
   },
+  emits: ['upsert', 'toast', 'close'],
   data() {
     return {
       errors: ref<Record<string, string>>({}),
@@ -71,6 +87,9 @@ export default defineComponent({
       useNodeStore, // sets this.nodeStore
     ),
   },
+  mounted() {
+    this.nodeStore.init();
+  },
   methods: {
     onBlur(name: string) {
       if (this.errors[name]) {
@@ -103,8 +122,5 @@ export default defineComponent({
       });
     },
   },
-  mounted() {
-    this.nodeStore.init();
-  },
 });
 </script>
diff --git a/ui/src/components/TimeAgo.vue b/ui/src/components/TimeAgo.vue
@@ -28,19 +28,6 @@ export default defineComponent({
       return this.absoluteTime;
     },
   },
-  methods: {
-    updateRelativeTime(t: string) {
-      if (this.relativeTime !== t) {
-        this.relativeTime = t;
-      }
-    },
-    fmt(n: number): string {
-      if (n < 10) {
-        return `0${n}`;
-      }
-      return `${n}`;
-    },
-  },
   mounted() {
     if (!this.time) {
       return;
@@ -65,5 +52,18 @@ export default defineComponent({
       this.timer.update(this.time);
     }
   },
+  methods: {
+    updateRelativeTime(t: string) {
+      if (this.relativeTime !== t) {
+        this.relativeTime = t;
+      }
+    },
+    fmt(n: number): string {
+      if (n < 10) {
+        return `0${n}`;
+      }
+      return `${n}`;
+    },
+  },
 });
 </script>