Small Refactor Pass

- Various transitions away from defineModel
- Fixed ChecBox
- Reworked PillBar
  - Made it a bit smaller
  - Now accepts either an object or array with keys
- Moved Index type to util and added MaybeIndex

client/src/components/inputs/CheckBox.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+}>(), {
+  modelValue: false,
+});
 
-const props = defineModel<{
-  modelValue: boolean,
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void,
 }>();
-let { modelValue } = $(props);
 
+let modelValue = $ref(false);
+watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; });
+watch($$(modelValue), (val) => emit('update:modelValue', val));
 </script>
 
 <template>

client/src/components/inputs/DropdownInput.vue

@@ -1,10 +1,6 @@
 <!-- Base component that implements selecting single and multiple values from a list in a type-unsafe manner -->
-<script lang="ts">
-export type Index = string | number | symbol;
-</script>
-
 <script setup lang="ts">
-import { equals, isNullish } from '../../util';
+import { equals, isNullish, Index } from '../../util';
 // --- Prop setup ---
 const props = withDefaults(defineProps<{
   // Two-Way Bindings (v-model)
@@ -33,10 +29,10 @@ const emit = defineEmits<{
 // Hook up two-way bindings
 let modelValue = $ref(multiple ? props.modelValue ?? [] : props.modelValue);
 watch(() => props.modelValue, (val: any) => { if (!equals(val, modelValue)) modelValue = val; }, { deep: true });
-watch($$(modelValue), (val: any) => { if(!equals(val, props.modelValue)) emit('update:modelValue', modelValue); }, { deep: true });
+watch($$(modelValue), (val: any) => emit('update:modelValue', modelValue), { deep: true });
 let search = $ref(props.search);
 watch(() => props.search, (val: string) => { if (!equals(val, search)) search = val; }, { deep: true });
-watch($$(search), (val) => { if(!equals(val, props.search)) emit('update:search', search); }, { deep: true });
+watch($$(search), (val) => emit('update:search', search), { deep: true });
 
 // --- Everything Else  ---
 let expanded = $ref(false);

client/src/components/inputs/PillBar.vue

@@ -1,41 +1,39 @@
 <script setup lang="ts">
+import { isNullish, Index, MaybeIndex } from '../../util';
 
-const props = defineModel<{
-  options: {
-    name: string,
-    key: string,
-    icon: Component,
-  }[],
-  modelValue: number | string,
-  useIndex: boolean,
+const props = withDefaults(defineProps<{
+  options: Record<Index, {
+    display?: string,
+    icon?: Component,
+  }>,
+  modelValue: MaybeIndex,
+}>(), {
+  options: () => ({}),
+});
+const { options } = $(props);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: MaybeIndex): void,
 }>();
-let { options, modelValue, useIndex } = $(props);
 
-function setSelection(option: any, index: number){
-  if (useIndex) {
-      modelValue = index
-    } else {
-      modelValue = option.key
-    }
-}
+let modelValue: MaybeIndex = $ref(null);
+watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; });
+watch($$(modelValue), (val) => emit('update:modelValue', val));
 
 onMounted(async() => {
-  if (modelValue === undefined) {
-    if (useIndex) {
-      modelValue = 0
-    } else {
-      modelValue = options[0].key
-    }
+  if (isNullish(modelValue)) {
+    const entries = Object.entries(options);
+    modelValue = entries.length > 0
+      ? entries[0][0]
+      : null;
   }
 });
-
 </script>
-
 <template>
   <div>
-    <button class="option" v-for="(option, index) in options" :key="index" :class="{selected:  modelValue == index || modelValue == option.key}" @click="setSelection(option, index)">
-      <i class="material-icons" v-if="option.icon">{{ option.icon }}</i>
-      {{ option.name }}
+    <button class="option" v-for="[index, option] of Object.entries(options)" :key="index" :class="{selected: modelValue === index}" @click="() => modelValue = index">
+      <component :is="option.icon"/>
+      {{ option.display }}
     </button>
   </div>
 </template>
@@ -43,9 +41,8 @@ onMounted(async() => {
 <style scoped>
 div {
   flex-flow: nowrap;
+  gap: 0.25rem;
 }
-
-.selected {
-  background-color: var(--cl-bg-sl);
-}
+button { padding: 0.25rem; gap: 0.25rem; }
+.selected { background-color: var(--cl-bg-sl); }
 </style>

client/src/components/inputs/SingleSelect.vue

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