enhance type safety in Picker component and update interaction utility methods

Author: Ayideyia

frontend/src/components/Picker/index.vue

@@ -1,60 +1,65 @@
-<script setup lang="ts">
-import { ref, toRaw } from 'vue'
+<script setup lang="ts" generic="ValueType = any, PickerType extends 'single' | 'multi' = 'single'">
+import { ref, toRaw, type Ref } from 'vue'
 
 import useI18n from '@/lang'
 
-export type PickerItem = {
+export type PickerItem<T> = {
   label: string
-  value: string
+  value: T
   description?: string
   background?: string
   onSelect?: (args: {
-    value: PickerItem['value']
-    option: PickerItem
-    options: PickerItem[]
-    selected: PickerItem['value'][]
+    value: PickerItem<T>['value']
+    option: PickerItem<T>
+    options: PickerItem<T>[]
+    selected: PickerItem<T>['value'][]
   }) => void
 }
 
-interface Props {
-  type: 'single' | 'multi'
+interface Props<T, K> {
+  type: K
   title: string
-  options: PickerItem[]
-  initialValue?: string[]
+  options: PickerItem<T>[]
+  initialValue?: T[]
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<ValueType, PickerType>>(), {
   options: () => [],
   initialValue: () => [],
 })
 
-const emits = defineEmits(['confirm', 'cancel', 'finish'])
+const emit = defineEmits<{
+  confirm: [val: PickerType extends 'single' ? ValueType : ValueType[]]
+  cancel: []
+  finish: []
+}>()
 
 const selected = ref(
-  new Set<string>(
-    props.initialValue.filter((v) => props.options.find((option) => option.value === v)),
+  new Set(
+    props.initialValue.filter((v) => props.options.find((o) => o.value === v)).map((v) => toRaw(v)),
   ),
-)
+) as Ref<Set<ValueType>>
 
 const { t } = useI18n.global
 
 const handleConfirm = () => {
-  let res: any = Array.from(selected.value).map((v) => toRaw(v))
+  const res: any = Array.from(selected.value).map((v) => toRaw(v))
   if (props.type === 'single') {
-    res = res[0]
+    emit('confirm', res[0])
+  } else {
+    emit('confirm', res)
   }
-  emits('confirm', res)
-  emits('finish')
+  emit('finish')
 }
 
 const handleCancel = () => {
-  emits('cancel')
-  emits('finish')
+  emit('cancel')
+  emit('finish')
 }
 
-const isSelected = (option: string) => selected.value.has(option)
+const isSelected = (option: ValueType) => selected.value.has(option)
 
-const handleSelect = (option: PickerItem) => {
+const handleSelect = (option: PickerItem<ValueType>) => {
   if (isSelected(option.value)) {
     selected.value.delete(option.value)
   } else {
@@ -64,7 +69,7 @@ const handleSelect = (option: PickerItem) => {
       value: option.value,
       option,
       options: props.options,
-      selected: [...selected.value],
+      selected: Array.from(selected.value).map((v) => toRaw(v)),
     })
   }
 }

frontend/src/utils/interaction.ts

@@ -1,4 +1,4 @@
-import { render, createVNode, type VNode, h } from 'vue'
+import { render, h, type VNode } from 'vue'
 
 import i18n from '@/lang'
 import { APP_TITLE, sampleID } from '@/utils'
@@ -72,7 +72,7 @@ class Message {
       const initInstance = () => {
         dom.style.cssText = 'display: flex; align-items: center; justify-content: center;'
 
-        const vnode = createVNode(MessageComp, {
+        const vnode = h(MessageComp, {
           icon,
           content,
           onClose: () => {
@@ -136,25 +136,25 @@ class Message {
 class Picker {
   constructor() {}
 
-  public single = <T>(title: string, options: PickerItem[], initialValue: string[] = []) => {
-    return this.buildPicker<T>('single', title, options, initialValue)
+  public single = <T>(title: string, options: PickerItem<T>[], initialValue: T[] = []) => {
+    return this.buildPicker('single', title, options, initialValue)
   }
 
-  public multi = <T>(title: string, options: PickerItem[], initialValue: string[] = []) => {
-    return this.buildPicker<T>('multi', title, options, initialValue)
+  public multi = <T>(title: string, options: PickerItem<T>[], initialValue: T[] = []) => {
+    return this.buildPicker('multi', title, options, initialValue)
   }
 
-  private buildPicker = <T>(
-    type: 'single' | 'multi',
+  private buildPicker = <ValueType, PickerType extends 'single' | 'multi'>(
+    type: PickerType,
     title: string,
-    options: PickerItem[],
-    initialValue: string[],
-  ): Promise<T> => {
+    options: PickerItem<ValueType>[],
+    initialValue: ValueType[],
+  ): Promise<PickerType extends 'single' ? ValueType : ValueType[]> => {
     return new Promise((resolve, reject) => {
       const { t } = i18n.global
       const dom = document.createElement('div')
       dom.style.cssText = ContainerCssText
-      const vnode = createVNode(PickerComp, {
+      const vnode = h(PickerComp<ValueType, PickerType>, {
         type,
         title,
         options,
@@ -183,7 +183,7 @@ const buildConfirm = (
     const { t } = i18n.global
     const dom = document.createElement('div')
     dom.style.cssText = ContainerCssText
-    const vnode = createVNode(ConfirmComp, {
+    const vnode = h(ConfirmComp, {
       title,
       message,
       options,
@@ -211,7 +211,7 @@ export const prompt = <T>(
   return new Promise<T>((resolve, reject) => {
     const dom = document.createElement('div')
     dom.style.cssText = ContainerCssText
-    const vnode = createVNode(PromptComp, {
+    const vnode = h(PromptComp, {
       title,
       initialValue,
       props,

frontend/src/views/HomeView/components/ConnectionsController.vue

@@ -199,7 +199,7 @@ const menu: Menu[] = [
     return {
       label,
       handler: async (record: Record<string, any>) => {
-        const options: PickerItem[] = []
+        const options: PickerItem<string>[] = []
         if (record.metadata.host) {
           options.push({
             label: t('kernel.rules.type.DOMAIN'),
@@ -233,7 +233,7 @@ const menu: Menu[] = [
             description: record.metadata.processPath,
           })
         }
-        const payloads = await picker.multi<string[]>('rulesets.selectRuleType', options)
+        const payloads = await picker.multi('rulesets.selectRuleType', options)
         try {
           await addToRuleSet(ruleset as any, payloads)
           await ignoredError(updateProvidersRules, ruleset)

frontend/src/views/HomeView/components/LogsController.vue

@@ -52,7 +52,7 @@ const menus: Menu[] = [
         return
       }
 
-      const options: PickerItem[] = []
+      const options: PickerItem<string>[] = []
 
       if (isValidIPv4(matches[1])) {
         options.push({
@@ -74,9 +74,7 @@ const menus: Menu[] = [
         })
       }
 
-      const payloads = await picker.multi<string[]>('rulesets.selectRuleType', options, [
-        options?.[0].value,
-      ])
+      const payloads = await picker.multi('rulesets.selectRuleType', options, [options?.[0].value])
 
       try {
         await addToRuleSet(ruleset as any, payloads)