refactor: migrate VDropDown to TypeScript

Author: gingerbeerlime

src/components/pivottable-ui/VDropdown.vue

@@ -7,31 +7,44 @@
       v-for="(text, key) in options"
       :key="key"
       :value="text"
-      :selected="text === valueModel ? 'selected' : undefined"
     >
       {{ text }}
     </option>
   </select>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps({
-  options: {
-    type: Array,
-    default: () => []
-  },
-  value: {
-    type: String,
-    default: ''
-  }
+const emit = defineEmits<{
+  (event: 'update:value', value: string): void
+}>()
+
+interface DropdownProps {
+  options: string[]
+  value: string
+}
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  options: () => [],
+  value: ''
 })
-const valueModel = ref(props.value || props.options[0])
-const emit = defineEmits(['update:value'])
+
+const valueModel = ref<string>('')
+
+watch(
+  [() => props.value, () => props.options],
+  ([val, opts]: [string, string[]]) => {
+    valueModel.value = val || opts[0] || ''
+  },
+  { immediate: true }
+)
+
 watch(
   valueModel,
-  (newVal) => { emit('update:value', newVal) },
+  (newVal) => {
+    emit('update:value', newVal)
+  },
   { immediate: true }
 )
 </script>