hereconnect/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue

<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
    <p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
    <CreateMessageDeliveryOptions>
      <template #telegram="{ label, method }">
        <CreateMessageDeliveryOptionTelegram
          :label
          :method
          v-model="localModel"
          @change="onChange"
        />
      </template>
      <template #webPush="{ label, method }">
        <CreateMessageDeliveryOptionWebPush
          :label
          :method
          v-model="localModel"
          @change="onChange"
        />
      </template>
      <template #default="{ label, method }">
        <CreateMessageDeliveryOption :label :method v-model="localModel" @change="onChange" />
      </template>
    </CreateMessageDeliveryOptions>
  </section>
</template>

<script setup lang="ts">
import { type QRCodeDocument } from '@hereconnect/types'
import CreateMessageDeliveryOptionTelegram from '@/components/create/CreateMessageDeliveryOptionTelegram.vue'
import CreateMessageDeliveryOptionWebPush from '@/components/create/CreateMessageDeliveryOptionWebPush.vue'
import { ref } from 'vue'

const emit = defineEmits(['nextStep'])
const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
const localModel = ref<null | QRCodeDocument['messageDeliveryMethod']>()

const onChange = () => {
  model.value = localModel.value
  emit('nextStep')
}
</script>