Add v-confirm-directive docs

packages/docs/src/data/nav.json

@@ -213,6 +213,7 @@
     "activeIcon": "mdi-function",
     "items": [
       "click-outside",
+      "confirm",
       "intersect",
       "mutate",
       "resize",

packages/docs/src/examples/v-confirm-directive/object-literals.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="text-center py-10">
+    <v-btn text="Confirm" v-confirm="confirm"></v-btn>
+  </div>
+</template>
+
+<script setup>
+  const confirm = {
+    text: 'Are you sure?',
+    onSubmit () {
+      alert('Confirmed!')
+    },
+  }
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      text: 'Are you sure?',
+      scrollStrategy: 'block',
+    }),
+    methods: {
+      onSubmit () {
+        alert('Confirmed!')
+      },
+    },
+  }
+</script>

packages/docs/src/examples/v-confirm-directive/usage.vue

@@ -0,0 +1,43 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :name="name"
+    :options="options"
+  >
+    <div class="text-center">
+      <v-btn
+        v-if="!showInput"
+        text="Save Change"
+        v-confirm="{ text: 'Are you sure?', onSubmit }"
+      ></v-btn>
+      <v-btn
+        v-else
+        text="Change name"
+        v-confirm="{ text: 'Enter name', input, onSubmit }"
+      ></v-btn>
+    </div>
+
+    <template v-slot:configuration>
+      <v-text-field v-model="text" label="Text"></v-text-field>
+      <v-checkbox v-model="showInput" label="Show Input"></v-checkbox>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const name = 'v-confirm'
+  const model = ref('default')
+  const text = ref('Are you sure?')
+  const showInput = ref(false)
+  const input = ref('John')
+
+  const code = computed(() => {
+    return !showInput.value ? `<v-btn v-confirm="{ text:'Are you sure?', onSubmit: () => alert('Submit clicked')}">Save Change</v-btn>`
+      : `<v-btn v-confirm="{ text:'Enter name', input: 'John', onSubmit: (value) => alert(value)}">Change name</v-btn>`
+  })
+
+  const onSubmit = value => {
+    alert(value || 'Submit clicked')
+  }
+</script>

packages/docs/src/pages/en/directives/confirm.md

@@ -0,0 +1,50 @@
+---
+emphasized: true
+meta:
+  nav: Confirm
+  title: Confirm directive
+  description: The Confirm directive is an easy to use implementation of VConfirm.
+  keywords: Confirm, vuetify Confirm directive, vue Confirm directive, mobile Confirm directive
+related:
+  - /components/menu/
+  - /components/list/
+  - /components/text-field/
+features:
+  report: true
+---
+
+# Confirm directive
+
+The `v-confirm` directive is a shorthand way of adding confirms in your application.
+
+<PageFeatures />
+
+<PromotedEntry />
+
+## Usage
+
+The `v-confirm` directive makes it easy to add a confirm to any element in your application. It is a wrapper around the `v-confirm` component.
+
+<ExamplesUsage name="v-confirm-directive" />
+
+## API
+
+| Props                                  | Type                         |
+|--------------------------------------------|-------------------------------------|
+| title                                       | String |
+| text                                       | String |
+| input                                       | String, Boolean |
+| inputProps                                       | [v-text-field](/api/v-text-field/) |
+| onSubmit                                       | ((value: any) => void) |
+| onCancel                                       | (() => number) |
+
+
+## Guide
+
+The `v-confirm` directive is a simple way to add a confirm to any element in your application. It is a wrapper around the `v-confirm`.
+
+### Object literals
+
+The `v-confirm` directive can also accept an object literal as a value. This is useful when you need to pass multiple props to the `v-confirm` component.
+
+<ExamplesExample file="v-confirm-directive/object-literals" />

packages/vuetify/src/directives/confirm/index.ts

@@ -9,11 +9,16 @@ import type { DirectiveBinding } from 'vue'
 import type { Anchor } from '@/util'
 
 export interface ConfirmDirectiveBinding
-  extends Omit<DirectiveBinding<string>, 'arg' | 'value'> {
-  arg?: {
-    [T in Anchor]: T extends `${infer A} ${infer B}` ? `${A}-${B}` : T;
-  }[Anchor]
-  value: boolean | string | Record<string, any>
+  extends Omit<DirectiveBinding<string>, 'value'> {
+  value: {
+    title: string
+    text: string
+    onSubmit: (value?: string) => void
+    onCancel?: () => void
+    input?: boolean
+    inputProps?: Record<string, unknown>
+    anchor?: Anchor
+  }
 }
 
 export const Confirm = useDirectiveComponent<ConfirmDirectiveBinding>(

packages/vuetify/src/directives/index.ts

@@ -1,10 +1,10 @@
 export { ClickOutside } from './click-outside'
 // export { Color } from './color'
+export { Confirm } from './confirm'
 export { Intersect } from './intersect'
 export { Mutate } from './mutate'
 export { Resize } from './resize'
 export { Ripple } from './ripple'
 export { Scroll } from './scroll'
 export { Touch } from './touch'
 export { Tooltip } from './tooltip'
-export { Confirm } from './confirm'