refactor: migrate VDraggableAttribute to TypeScript

Author: gingerbeerlime

pnpm-lock.yaml

@@ -7,7 +7,8 @@
       <slot
         name="pvtAttr"
         :attr-name="attributeName"
-      >{{ attributeName }}</slot>
+        >{{ attributeName }}</slot
+      >
       <span
         v-if="!hideDropDown"
         @mousedown.stop
@@ -23,7 +24,9 @@
         :filter-box-values="attributeValues"
         :z-index="zIndex"
         @mousedown.stop
-        @update:z-index-of-filter-box="$emit('update:zIndexOfFilterBox', $event)"
+        @update:z-index-of-filter-box="
+          $emit('update:zIndexOfFilterBox', $event)
+        "
         @update:unselected-filter-values="
           $emit('update:unselectedFilterValues', $event)
         "
@@ -32,45 +35,39 @@
   </li>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import VFilterBox from './VFilterBox.vue'
 import { computed } from 'vue'
 
-const emit = defineEmits([
-  'update:zIndexOfFilterBox',
-  'update:unselectedFilterValues',
-  'update:openStatusOfFilterBox'
-])
+const emit = defineEmits<{
+  (event: 'update:zIndexOfFilterBox', attributeName: string): void
+  (
+    event: 'update:unselectedFilterValues',
+    payload: { key: string; value: Record<string, boolean> }
+  ): void
+  (
+    event: 'update:openStatusOfFilterBox',
+    payload: { key: string; value: boolean }
+  ): void
+}>()
 
-const props = defineProps({
-  attributeName: {
-    type: String,
-    required: true
-  },
-  attributeValues: {
-    type: Object,
-    default: () => ({})
-  },
-  restricted: {
-    type: Boolean,
-    default: false
-  },
-  open: {
-    type: Boolean,
-    default: false
-  },
-  unselectedFilterValues: {
-    type: Object,
-    default: () => ({})
-  },
-  zIndex: {
-    default: 1000,
-    type: Number
-  },
-  hideDropDownForUnused: {
-    type: Boolean,
-    default: false
-  }
+interface DraggableAttributeProps {
+  attributeName: string
+  attributeValues?: Record<string, number>
+  restricted?: boolean
+  open?: boolean
+  unselectedFilterValues?: Record<string, boolean>
+  zIndex?: number
+  hideDropDownForUnused?: boolean
+}
+
+const props = withDefaults(defineProps<DraggableAttributeProps>(), {
+  attributeValues: () => ({}),
+  restricted: false,
+  open: false,
+  unselectedFilterValues: () => ({}),
+  zIndex: 1000,
+  hideDropDownForUnused: false
 })
 
 const toggleFilterBox = () => {