Phi / Delete Resource

<Button variant="destructive" @click="open = true">
  Delete Zone
</Button>

<DeleteResource
  v-model:open="open"
  resource-type="Zone"
  resource-name="example.com"
  @delete="handleDelete"
/>

Installation

DeleteResource is a package block for critical delete confirmation flows.

1. Install the package

pnpm add @dicehub/phi@beta

2. Import the block

import { DeleteResource } from "@dicehub/phi/blocks/delete-resource";

Why blocks? Blocks are composed experiences for product flows that need predictable behavior, copy, and recovery states.

Usage

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "@dicehub/phi/components/button";
import { DeleteResource } from "@dicehub/phi/blocks/delete-resource";

const open = ref(false);
const isDeleting = ref(false);

async function handleDelete() {
  isDeleting.value = true;
  try {
    await deleteZone("example.com");
    open.value = false;
  } finally {
    isDeleting.value = false;
  }
}
</script>

<template>
  <Button variant="destructive" @click="open = true">
    Delete Zone
  </Button>

  <DeleteResource
    v-model:open="open"
    resource-type="Zone"
    resource-name="example.com"
    :is-deleting="isDeleting"
    @delete="handleDelete"
  />
</template>

Examples

Worker Deletion

Works with any resource type by changing the resource type and resource name props.

<DeleteResource
  v-model:open="open"
  resource-type="Worker"
  resource-name="api-gateway-worker"
  @delete="handleDelete"
/>

Error State

Use the errorMessage prop to show an error message.

<DeleteResource
  v-model:open="open"
  resource-type="Zone"
  resource-name="example.com"
  error-message="Something went wrong"
  @delete="handleDelete"
/>

API Reference

Props

Prop	Type	Default	Description
`size`	`"sm" \| "base"`	`"base"`	Dialog size variant.
`open*`	`boolean`	`-`	Whether the dialog is open. In Vue, use v-model:open.
`resourceType*`	`string`	`-`	The type of resource being deleted.
`resourceName*`	`string`	`-`	The exact resource name the user must type.
`isDeleting`	`boolean`	`false`	Whether the delete action is in progress.
`caseSensitive`	`boolean`	`true`	Whether the confirmation input must match case exactly.
`deleteButtonText`	`string`	`Delete ${resourceType}`	Custom destructive action label.
`className`	`string`	`-`	Additional class for the dialog.
`errorMessage`	`string`	`-`	Error message displayed above the confirmation copy.

Events

Event	Type	Description
`delete`	`() => void`	Emitted when the user confirms deletion.
`openChange`	`(open: boolean) => void`	Emitted whenever the dialog open state changes.
`update:open`	`(open: boolean) => void`	Used by v-model:open for controlled state.