Kappa / Delete Resource

Overview

DeleteResource combines Dialog Layout, Input, Button, and Banner. Your application owns the request and closes the dialog after success.

Examples

Simple confirmation

Review the resource before deleting it. Initial focus stays on Cancel.

Pressure probe 04Saved measurement · Updated today

Demo only. No resources are removed.

<script setup lang="ts">
import { ref } from "vue"
import { Button, DeleteResource } from "@dicehub/kappa"
const open = ref(false)
// Replace this demo handler with your application's deletion request.
const confirm = () => { open.value = false }
</script>

<template>
  <DeleteResource
    v-model:open="open"
    resource-name="Pressure probe 04"
    title="Delete measurement?"
    confirm-label="Delete measurement"
    @confirm="confirm"
  >
    <template #trigger><Button variant="destructive-outline">Delete</Button></template>
  </DeleteResource>
</template>

Confirm the resource name

Require the exact name for a deletion that affects other members or stored data.

Turbine cooling studyProject · 3 runs · 1.2 GB

Demo only. No resources are removed.

<DeleteResource
  v-model:open="open"
  resource-name="Turbine cooling study"
  title="Delete project?"
  confirm-label="Delete project"
  require-name
  @confirm="deleteProject"
>
  <template #trigger><Button variant="destructive-outline">Delete</Button></template>
  <p>The project, its runs, and stored results will be removed for all members.</p>
</DeleteResource>

Pending request and retry

Keep the dialog open until the request succeeds. Failed requests retain the name entry so the user can retry.

Turbine cooling studyProject · 3 runs · 1.2 GB

The first request fails. Try again to complete the demo.

<script setup lang="ts">
import { ref } from "vue"
import { Button, DeleteResource } from "@dicehub/kappa"

const props = defineProps<{ removeProject: () => Promise<void> }>()
const open = ref(false)
const deleting = ref(false)
const error = ref("")

async function confirm() {
  if (deleting.value) return
  deleting.value = true
  error.value = ""
  try {
    await props.removeProject()
    open.value = false
  } catch {
    error.value = "The request failed. Your project is unchanged. Try again."
  } finally {
    deleting.value = false
  }
}
</script>

<template>
  <DeleteResource
    v-model:open="open"
    resource-name="Turbine cooling study"
    require-name
    :deleting="deleting"
    :error="error"
    @confirm="confirm"
    @open-change="error = ''"
  >
    <template #trigger><Button variant="destructive-outline">Delete</Button></template>
  </DeleteResource>
</template>

Installation

import { DeleteResource } from "@dicehub/kappa/blocks/delete-resource"
import "@dicehub/kappa/styles/theme-kappa.css"

The root package also exports the block and its public types.

API

Prop	Default	Purpose
`resourceName`	Required	Name shown in the dialog and used for exact-name confirmation.
`open / defaultOpen`	Closed	Controlled visibility or initial uncontrolled visibility. Use `v-model:open` to close after success.
`requireName`	`false`	Enables case-sensitive name confirmation. Spaces must also match.
`deleting`	`false`	Shows progress, makes the input read-only, and blocks user dismissal and confirmation.
`disabled`	`false`	Disables confirmation. Cancel remains available.
`error`	—	Request error announced in a banner. Clear it before retrying or opening another resource.
`title / description`	Delete resource? / This action cannot be undone.	Accessible title and description.
`confirmLabel / deletingLabel / cancelLabel`	Delete resource / Deleting… / Cancel	Translate the action text for your application.
`confirmationLabel`	Type the resource name to confirm	Visible label for the confirmation input.
`finalFocusEl`	Trigger	Optional focus destination after close, for example when deletion removes the trigger.

confirm requests deletion. It does not close the dialog or call a service. update:open and openChange report user visibility changes. The trigger slot accepts one button; the default slot adds context below the resource name. Attributes and DOM listeners pass to the dialog content.

Name entry clears when the dialog closes, opens, or targets a different resource. It remains available after an error. An empty resource name cannot pass exact-name confirmation.

Accessibility

The block uses the alert-dialog behavior of Kappa Dialog Layout. Focus starts on Cancel or the name input. Outside clicks never dismiss it. Escape cancels while idle and has no effect during a pending request. The dialog traps focus and restores it after close.

Describe the effect of deletion, including shared resources. Do not use name confirmation for every minor action. Set deleting when the request starts, clear it in a finally handler, and provide an error message when the request fails. The parent can still close or unmount the dialog; prevent that in the application while the request is pending.