Confirm

The nuke will be launched after 10s. Are you sure?

Example

Basic

Show Code

<script lang="ts" setup>
import { RButton, RToast } from 'roughness'
import { ref } from 'vue'

let open = ref(false)

function show() {
  open.value = true
}
</script>

<template>
  <RButton @click="show">Show</RButton>
  <RConfirm v-model:open="open">Are you sure you want to cancel?</RConfirm>
</template>

Are you sure you want to cancel?

Composition

Show Code

<script lang="ts" setup>
import { RConfirmProvider } from 'roughness'
</script>

<template>
  <RConfirmProvider>
    <App />
  </RConfirmProvider>
</template>

<script lang="ts" setup>
import { useConfirm, useToast } from 'roughness'

const confirm = useConfirm()
const toast = useToast()

async function ask() {
  const result = await confirm({
    title: () => 'Hey Guys',
    default: () => 'Let\'s go for a walk outside!',
  })
  toast(result ? 'Hooray!' : 'OK...', {
    type: result ? 'success' : 'comment',
  })
}
</script>

<template>
  <RButton @click="ask">Ask</RButton>
</template>

Usage

Props

Name	Type	Default Value	Description
...			See Dialog Props.

Events

Name	Type	Description
cancel
confirm
...		See Dialog Events.

Slots

Name	Type	Description
title
default

ConfirmProvider Slots

Name	Type	Description
default

Compositions

import type { ComponentProps, ComponentRenderable } from 'roughness'

export declare function useConfirm(): (
  renderable: ComponentRenderable<typeof RConfirm>,
  props?: ComponentProps<typeof RConfirm>,
) => Promise<boolean>