Linting fixes and form style experiment

- Also updated pnpm on my end for a hopefully clean lockfile

client/src/components/inputs/DropdownInput.vue

@@ -29,11 +29,11 @@ const props = withDefaults(defineProps<{
   placeholder?: string,
 }>(), {
   modelValue: null,
-  search: "",
+  search: '',
   options: () => ({}),
   multiple: false,
   searchProvider: null,
-  placeholder: "Search...",
+  placeholder: 'Search...',
 });
 let { multiple, searchProvider, placeholder } = $(props);
 
@@ -62,14 +62,14 @@ onMounted(() => {
       await performSearch(unknownKeys);
       knownKeys = Object.keys(options);
       unknownKeys = (val as Index[]).filter(key => !knownKeys.includes(key.toString()));
-      for (let key of unknownKeys) console.warn(`Unknown key in DropdownInput:`, key/*, options*/);
+      for (let key of unknownKeys) console.warn('Unknown key in DropdownInput:', key/*, options*/);
       return modelValue = (val as Index[]).filter(key => knownKeys.includes(key.toString()));
     }
     if (!knownKeys.includes(val.toString())) {
       await performSearch([val]);
       knownKeys = Object.keys(options);
       if (!knownKeys.includes(val.toString()))
-        return console.warn(`Unknown key in DropdownInput:`, val/*, options*/);
+        return console.warn('Unknown key in DropdownInput:', val/*, options*/);
     }
     modelValue = val;
   }, { deep: true, immediate: true });
@@ -150,9 +150,9 @@ function toggle(key: any) {
 
 function handleKeydown(e: KeyboardEvent) {
   switch (e.key) {
-  case "Backspace":
-  case "Delete":
-    if (!modelValue || search !== "" || !multiple) break;
+  case 'Backspace':
+  case 'Delete':
+    if (!modelValue || search !== '' || !multiple) break;
     if (navigated === 0) modelValue.pop();
     else if (navigated > 0) navigated = 0;
     else {
@@ -161,21 +161,21 @@ function handleKeydown(e: KeyboardEvent) {
     }
     modelValue = modelValue;
     break;
-  case "ArrowUp":
+  case 'ArrowUp':
     navigated--;
     if (-navigated > selCount) navigated = 0;
     e.preventDefault(); // Prevent cursor from moving to the front/back
     break;
-  case "ArrowDown":
+  case 'ArrowDown':
     navigated++;
     if (navigated > Object.entries(options).length) navigated = 0;
     e.preventDefault(); // Prevent cursor from moving to the front/back
     break;
-  case "Enter":
+  case 'Enter':
     if (!expanded) expand();
     else if (navigated > 0) toggle(Object.entries(options)[navigated-1][0]);
     break;
-  case "Escape":
+  case 'Escape':
     if (navigated !== 0) navigated = 0;
     else expanded = false;
     break;

client/src/components/inputs/EnumInput.vue

@@ -81,4 +81,7 @@ watchEffect(() => {
 }
 .variant { padding: 0.25rem; gap: 0.25rem; }
 .selected { background-color: var(--cl-bg-sl); }
+.enum-fields {
+  padding-left: 0px;
+}
 </style>

client/src/components/inputs/MultiSelect.vue

@@ -1,7 +1,7 @@
 <!-- Wrapper component that sets "multiple" on DropdownInput to true and declares its type to be an array of any -->
 <script setup lang="ts">
-import { equals, Index } from "../../util";
-import { Options, MaybeSearchProvider } from "./DropdownInput.vue";
+import { equals, Index } from '../../util';
+import { Options, MaybeSearchProvider } from './DropdownInput.vue';
 const props = withDefaults(defineProps<{
   // Two-Way Bindings (v-model)
   modelValue?: Index[],
@@ -13,10 +13,10 @@ const props = withDefaults(defineProps<{
   placeholder?: string,
 }>(), {
   modelValue: () => [],
-  search: "",
+  search: '',
   options: () => ({}),
   searchProvider: null,
-  placeholder: "Search...",
+  placeholder: 'Search...',
 });
 
 const emit = defineEmits<{

client/src/components/inputs/NicerForm.vue

@@ -62,4 +62,9 @@ watch($$(modelValue), (val) => {
 label::after {
   content: ":";
 }
+
+label {
+  border-left: 1px solid var(--cl-fg);
+  border-bottom: 1px solid var(--cl-fg);
+}
 </style>

client/src/components/inputs/PillBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isNullish, Index, MaybeIndex } from '../../util';
+import { Index, MaybeIndex } from '../../util';
 
 const props = withDefaults(defineProps<{
   options: Record<Index, {

client/src/components/inputs/SingleSelect.vue

@@ -1,7 +1,7 @@
 <!-- Wrapper component that sets "multiple" on DropdownInput to false and declares its type to be an Index -->
 <script setup lang="ts">
-import { equals, MaybeIndex } from "../../util";
-import { Options, MaybeSearchProvider } from "./DropdownInput.vue";
+import { equals, MaybeIndex } from '../../util';
+import { Options, MaybeSearchProvider } from './DropdownInput.vue';
 const props = withDefaults(defineProps<{
   // Two-Way Bindings (v-model)
   modelValue?: MaybeIndex,
@@ -13,10 +13,10 @@ const props = withDefaults(defineProps<{
   placeholder?: string,
 }>(), {
   modelValue: null,
-  search: "",
+  search: '',
   options: () => ({}),
   searchProvider: null,
-  placeholder: "Search...",
+  placeholder: 'Search...',
 });
 
 const emit = defineEmits<{