docs(VConfirmEdit): add basic docs page

packages/api-generator/src/locale/en/VConfirmEdit.json

@@ -2,5 +2,9 @@
   "props": {
     "cancelText": "Text for the cancel button",
     "okText": "Text for the ok button"
+  },
+  "events": {
+    "ok": "The event emitted when the user clicks the OK button",
+    "cancel": "The event emitted when the user clicks the Cancel button"
   }
 }

packages/docs/src/data/nav.json

@@ -224,6 +224,10 @@
         "title": "calendars",
         "subfolder": "components"
       },
+      {
+        "title": "confirm-edit",
+        "subfolder": "components"
+      },
       {
         "title": "empty-states",
         "subfolder": "components"

packages/docs/src/data/page-to-api.json

@@ -58,6 +58,7 @@
   "components/chip-groups": ["VChip", "VChipGroup"],
   "components/chips": ["VChip", "VChipGroup"],
   "components/color-pickers": ["VColorPicker"],
+  "components/confirm-edit": ["VConfirmEdit"],
   "components/combobox": ["VCombobox"],
   "components/data-iterators": ["VDataIterator"],
   "components/data-tables": [

packages/docs/src/examples/v-confirm-edit/misc-date-picker.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-card
+    class="mx-auto"
+    max-width="328"
+    rounded="lg"
+    border
+  >
+    <v-confirm-edit v-model="date">
+      <template v-slot:default="{ model: proxyModel, actions }">
+        <v-date-picker v-model="proxyModel.value">
+          <template v-slot:actions>
+            <component :is="actions"></component>
+          </template>
+        </v-date-picker>
+      </template>
+    </v-confirm-edit>
+  </v-card>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const date = shallowRef()
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <ExamplesUsageExample
+    v-model="model"
+    :code="code"
+    :options="options"
+    :script="script"
+    name="v-avatar"
+  >
+    <div>
+      <v-confirm-edit v-model="value" v-bind="props">
+        <template v-slot:default="{ model: proxyModel, actions }">
+          <v-card
+            class="mx-auto"
+            max-width="320"
+            title="Update Field"
+          >
+            <template v-slot:text>
+              <v-text-field
+                v-model="proxyModel.value"
+                messages="Modify my value"
+              ></v-text-field>
+            </template>
+
+            <template v-slot:actions>
+              <v-spacer></v-spacer>
+
+              <component :is="actions"></component>
+            </template>
+          </v-card>
+        </template>
+      </v-confirm-edit>
+    </div>
+
+    <template v-slot:configuration>
+      <v-text-field v-model="okText" label="Ok text"></v-text-field>
+      <v-text-field v-model="cancelText" label="Cancel text"></v-text-field>
+    </template>
+  </ExamplesUsageExample>
+</template>
+
+<script setup>
+  const model = ref('default')
+  const options = []
+  const value = ref('Egg Plant')
+  const okText = ref('Ok')
+  const cancelText = ref('Cancel')
+
+  const props = computed(() => {
+    return {
+      'ok-text': okText.value === 'Ok' ? undefined : okText.value,
+      'cancel-text': cancelText.value === 'Cancel' ? undefined : cancelText.value,
+      'v-model': 'model',
+    }
+  })
+
+  const slots = computed(() => {
+    return `
+  <template v-slot:default="{ model: proxyModel, actions }">
+    <v-card
+      class="mx-auto"
+      max-width="320"
+      title="Update Field"
+    >
+      <template v-slot:text>
+        <v-text-field
+          v-model="proxyModel.value"
+          messages="Modify my value"
+        ></v-text-field>
+      </template>
+
+      <template v-slot:actions>
+        <v-spacer></v-spacer>
+
+        <component :is="actions"></component>
+      </template>
+    </v-card>
+  </template>
+`
+  })
+
+  const script = computed(() => {
+    return `<script setup>
+  import { shallowRef } from 'vue'
+
+  const model = shallowRef('Egg plant')
+<` + '/script>'
+  })
+
+  const code = computed(() => {
+    return `<v-confirm-edit${propsToString(props.value)}>${slots.value}</v-confirm-edit>`
+  })
+</script>

packages/docs/src/pages/en/components/confirm-edit.md

@@ -0,0 +1,48 @@
+---
+emphasized: true
+meta:
+  nav: Confirm Edit
+  title: Confirm Edit
+  description: The confirm edit component is used to allow the user to verify their changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes.
+  keywords: v-confirm-edit, confirm edit, vuetify confirm edit, vuetify confirm edit component, vuetify confirm edit examples
+related:
+  - /components/avatars/
+  - /components/icons/
+  - /components/toolbars/
+features:
+  github: /labs/VConfirmEdit/
+  label: 'C: VConfirmEdit'
+  report: true
+---
+
+# Confirm edit
+
+The `v-confirm-edit` component is used to allow the user to verify their changes before they are committed.
+
+![Badge Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-badge/v-badge-entry.png)
+
+<PageFeatures />
+
+## Usage
+
+<ExamplesUsage name="v-confirm-edit" />
+
+<PromotedEntry />
+
+## API
+
+| Component | Description |
+| - | - |
+| [v-confirm-edit](/api/v-confirm-edit/) | Primary Component |
+
+<ApiInline hide-links />
+
+## Guide
+
+The `v-confirm-edit` component is an intuitive way to capture a model's changes before they are committed. This is useful when you want to prevent accidental changes or to allow the user to cancel their changes.
+
+### Pickers
+
+It's easy to integrate pickers into the `v-confirm-edit` component. This allows you to provide a more user-friendly experience when selecting dates, times, or colors.
+
+<ExamplesExample file="v-confirm-edit/misc-date-picker" />

packages/docs/src/pages/en/introduction/roadmap.md

@@ -29,7 +29,7 @@ The following is a list of all planned components for the year 2024.
 | [v-empty-state](/components/empty-states/) | *️⃣ | April 2024 |
 | [v-sparkline](/components/sparklines/) | *️⃣ | April 2024 |
 | [v-speed-dial](/components/speed-dials/) | *️⃣ | April 2024 |
-| v-confirm-edit | *️⃣ | April 2024 |
+| [v-confirm-edit](/components/confirm-edit/) | *️⃣ | April 2024 |
 | [v3.7 (Odyssey)](https://github.com/vuetifyjs/vuetify/milestone/73) | | { .bg-surface-light } |
 | [v-treeview](/components/treeview/) | *️⃣ | July 2024 |
 | [v-number-input](/components/number-inputs/) | *️⃣  | July 2024 |