DeviceManager/src/lib/serial/TauriSerialDialog.svelte

<script lang="ts">
  import {createEventDispatcher} from "svelte"

  export let ports: SerialPort[]
  const dispatch = createEventDispatcher<{confirm: SerialPort | undefined}>()
  let selected = ports[0].getInfo().name
</script>

<dialog>
  {#each ports as port}
    {@const info = port.getInfo()}
    <label>{info.product}<input type="radio" name="port" value={info.name} bind:group={selected} /></label>
  {/each}

  <button on:click={() => dispatch("confirm", undefined)}>Cancel</button>
  <button
    on:click={() =>
      dispatch(
        "confirm",
        ports.find(it => it.getInfo().name === selected),
      )}>Ok</button
  >
</dialog>