[6.x] Confirmation Modals (#13499)

jasonvarga · web-flow · commit ae2690fef426 · 2026-01-09T10:49:57.000-05:00
diff --git a/packages/cms/src/temporary.js b/packages/cms/src/temporary.js
@@ -2,7 +2,6 @@ export const {
     HasInputOptions,
     InlineEditForm,
     RelatedItem,
-    ConfirmationModal,
     RevisionHistory,
     RestoreRevision,
     RevisionPreview,
diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
@@ -15,6 +15,7 @@ export const {
     CodeEditor,
     Combobox,
     CommandPaletteItem,
+    ConfirmationModal,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/cms/temporary.js b/resources/js/bootstrap/cms/temporary.js
@@ -1,7 +1,6 @@
 export { default as HasInputOptions } from '../../components/fieldtypes/HasInputOptions.js';
 export { default as InlineEditForm } from '../../components/inputs/relationship/InlineEditForm.vue';
 export { default as RelatedItem } from '../../components/inputs/relationship/Item.vue';
-export { default as ConfirmationModal } from '../../components/modals/ConfirmationModal.vue';
 export { default as RevisionHistory } from '../../components/revision-history/History.vue';
 export { default as RestoreRevision } from '../../components/revision-history/Restore.vue';
 export { default as RevisionPreview } from '../../components/revision-history/Preview.vue';
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
@@ -15,6 +15,7 @@ export {
     CodeEditor,
     Combobox,
     CommandPaletteItem,
+    ConfirmationModal,
     Context,
     ContextFooter,
     ContextHeader,
diff --git a/resources/js/bootstrap/components.js b/resources/js/bootstrap/components.js
@@ -14,7 +14,7 @@ import Slugify from '../components/slugs/Slugify.vue';
 import ElementContainer from '../components/ElementContainer.vue';
 import CreateEntryButton from '../components/entries/CreateEntryButton.vue';
 import Portal from '../components/portals/Portal.vue';
-import ConfirmationModal from '../components/modals/ConfirmationModal.vue';
+import ConfirmationModal from '../components/ui/Modal/ConfirmationModal.vue';
 import FieldActionModal from '../components/field-actions/FieldActionModal.vue';
 import ElevatedSessionModal from '../components/modals/ElevatedSessionModal.vue';
 import ResourceDeleter from '../components/ResourceDeleter.vue';
diff --git a/resources/js/components/ResourceDeleter.vue b/resources/js/components/ResourceDeleter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="deleting"
+        :open="deleting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Delete')"
diff --git a/resources/js/components/actions/ConfirmableAction.vue b/resources/js/components/actions/ConfirmableAction.vue
@@ -87,7 +87,7 @@ defineExpose({
 
 <template>
     <confirmation-modal
-        v-if="confirming"
+        v-model:open="confirming"
         :title="action.title"
         :danger="action.dangerous"
         :submittable="action.runnable"
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
@@ -168,7 +168,7 @@
             />
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            v-model:open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
@@ -32,7 +32,7 @@
 
 
         <confirmation-modal
-            v-if="showNewFilenameModal"
+            :open="showNewFilenameModal"
             :title="__('New Filename')"
             @cancel="showNewFilenameModal = false"
             @confirm="confirmNewFilename"
diff --git a/resources/js/components/blueprints/BlueprintResetter.vue b/resources/js/components/blueprints/BlueprintResetter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="resetting"
+        :open="resetting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Reset')"
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
@@ -220,7 +220,7 @@
         />
 
         <confirmation-modal
-            v-if="selectingOrigin"
+            :open="selectingOrigin"
             :title="__('Create Localization')"
             :buttonText="__('Create')"
             @cancel="cancelLocalization()"
@@ -234,7 +234,7 @@
         </confirmation-modal>
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/field-actions/FieldActionModal.vue b/resources/js/components/field-actions/FieldActionModal.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <confirmation-modal
+            open
             :title="title"
             :danger="dangerous"
             :buttonText="buttonText"
diff --git a/resources/js/components/fieldsets/FieldsetDeleter.vue b/resources/js/components/fieldsets/FieldsetDeleter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="deleting"
+        :open="deleting"
         :title="modalTitle"
         :buttonText="__('Delete')"
         :danger="true"
diff --git a/resources/js/components/fieldsets/FieldsetResetter.vue b/resources/js/components/fieldsets/FieldsetResetter.vue
@@ -1,6 +1,6 @@
 <template>
     <confirmation-modal
-        v-if="resetting"
+        :open="resetting"
         :title="modalTitle"
         :bodyText="modalBody"
         :buttonText="__('Reset')"
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -92,7 +92,7 @@
         </div>
 
         <confirmation-modal
-            v-if="deleting !== false"
+            :open="deleting !== false"
             :title="__('Delete Row')"
             :bodyText="__('Are you sure you want to delete this row?')"
             :buttonText="__('Delete')"
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -61,7 +61,7 @@
             </section>
 
             <confirmation-modal
-                v-if="deletingRow !== false"
+                :open="deletingRow !== false"
                 :title="__('Delete Row')"
                 :bodyText="__('Are you sure you want to delete this row?')"
                 :buttonText="__('Delete')"
@@ -72,7 +72,7 @@
             </confirmation-modal>
 
             <confirmation-modal
-                v-if="deletingColumn !== false"
+                :open="deletingColumn !== false"
                 :title="__('Delete Column')"
                 :bodyText="__('Are you sure you want to delete this column?')"
                 :buttonText="__('Delete')"
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -41,7 +41,7 @@
         </element-container>
 
         <confirmation-modal
-            v-if="deletingRow !== null"
+            :open="deletingRow !== null"
             :title="__('Delete Row')"
             :body-text="__('Are you sure?')"
             :button-text="__('Delete')"
diff --git a/resources/js/components/fieldtypes/replicator/Set.vue b/resources/js/components/fieldtypes/replicator/Set.vue
@@ -235,7 +235,7 @@ function onAnimationComplete() {
         </div>
 
         <confirmation-modal
-            v-if="deletingSet"
+            :open="deletingSet"
             :title="__('Delete Set')"
             :body-text="__('Are you sure?')"
             :button-text="__('Delete')"
diff --git a/resources/js/components/globals/PublishForm.vue b/resources/js/components/globals/PublishForm.vue
@@ -85,7 +85,7 @@
         />
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -33,7 +33,7 @@
         </Stack>
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            :open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/revision-history/Restore.vue b/resources/js/components/revision-history/Restore.vue
@@ -3,7 +3,7 @@
         <Button @click="confirming = true" :text="__('Restore')" />
 
         <confirmation-modal
-            v-if="confirming"
+            :open="confirming"
             :title="__('Restore Revision')"
             :buttonText="__('Restore')"
             @confirm="restore"
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
@@ -55,7 +55,7 @@
         </div>
 
         <confirmation-modal
-            v-if="closingWithChanges"
+            :open="closingWithChanges"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
@@ -77,7 +77,7 @@
         </ui-panel>
 
         <confirmation-modal
-            v-if="discardingChanges"
+            :open="discardingChanges"
             :title="__('Discard Changes')"
             :body-text="__('Are you sure?')"
             :button-text="__('Discard Changes')"
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
@@ -111,7 +111,7 @@
         </PublishContainer>
 
         <confirmation-modal
-            v-if="pendingLocalization"
+            :open="pendingLocalization"
             :title="__('Unsaved Changes')"
             :body-text="__('Are you sure? Unsaved changes will be lost.')"
             :button-text="__('Continue')"
diff --git a/resources/js/components/two-factor/RecoveryCodesModal.vue b/resources/js/components/two-factor/RecoveryCodesModal.vue
@@ -87,7 +87,7 @@ function copyToClipboard() {
     </Modal>
 
     <confirmation-modal
-        v-if="confirming"
+        :open="confirming"
         :danger="true"
         :title="__('Are you sure?')"
         @cancel="confirming = false"
diff --git a/resources/js/components/two-factor/TwoFactor.vue b/resources/js/components/two-factor/TwoFactor.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue';
-import ConfirmationModal from '@/components/modals/ConfirmationModal.vue';
+import { ConfirmationModal } from '@ui';
 import TwoFactorSetup from './Setup.vue';
 import TwoFactorRecoveryCodesModal from './RecoveryCodesModal.vue';
 import { requireElevatedSession } from '@/components/elevated-sessions';
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
@@ -207,7 +207,7 @@ function deletePreset() {
     </div>
 
     <confirmation-modal
-        v-if="isCreating"
+        :open="isCreating"
         :title="__('Create New View')"
         :buttonText="__('Create')"
         @cancel="isCreating = false"
@@ -222,7 +222,7 @@ function deletePreset() {
     </confirmation-modal>
 
     <confirmation-modal
-        v-if="isRenaming"
+        :open="isRenaming"
         :title="__('Rename View')"
         :buttonText="__('Rename')"
         @cancel="isRenaming = false"
@@ -242,7 +242,7 @@ function deletePreset() {
     </confirmation-modal>
 
     <confirmation-modal
-        v-if="isConfirmingDeletion"
+        :open="isConfirmingDeletion"
         :title="__('Delete View')"
         :bodyText="__('Are you sure you want to delete this view?')"
         :buttonText="__('Delete')"
diff --git a/resources/js/components/ui/Modal/ConfirmationModal.vue b/resources/js/components/ui/Modal/ConfirmationModal.vue
@@ -1,10 +1,17 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';
 import { Modal, ModalClose, Button, Icon } from '@/components/ui';
 
-const emit = defineEmits(['opened', 'confirm', 'cancel']);
+const emit = defineEmits([
+    'update:open',
+    'opened',
+    'confirm',
+    'cancel'
+]);
 
 const props = defineProps({
+    /** The controlled open state of the modal. */
+    open: { type: Boolean, default: false },
     title: {
         type: String,
     },
@@ -36,21 +43,17 @@ const props = defineProps({
         default: false,
     },
     busy: {
-        type: Boolean,
-        default: false,
+        type: [Boolean, undefined],
+        default: undefined,
     },
 });
 
-onMounted(() => emit('opened'));
-
-const modalOpen = ref(true);
-
 function updateModalOpen(open) {
     if (! open && props.busy) {
         return;
     }
 
-    modalOpen.value = open;
+    emit('update:open', open);
 
     if (! open) emit('cancel');
 }
@@ -59,11 +62,27 @@ function submit() {
     if (props.busy) return;
 
     emit('confirm');
+
+    if (shouldCloseOnSubmit.value) {
+        updateModalOpen(false);
+    }
 }
+
+const shouldCloseOnSubmit = computed(() => {
+    // If the busy prop is provided, we will assume they will handle the open state externally.
+    return props.busy === undefined;
+});
 </script>
 
 <template>
-    <Modal ref="modal" :title="__(title)" :open="modalOpen" @update:open="updateModalOpen">
+    <Modal
+        ref="modal"
+        :title="__(title)"
+        :open="open"
+        :dismissible="cancellable"
+        @update:open="updateModalOpen"
+        @opened="emit('opened')"
+    >
         <div
             v-if="busy"
             class="pointer-events-none absolute inset-0 flex select-none items-center justify-center bg-white bg-opacity-75 dark:bg-gray-850"
@@ -78,9 +97,8 @@ function submit() {
 
         <template v-if="cancellable || submittable" #footer>
             <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
-                <ModalClose asChild>
+                <ModalClose asChild v-if="cancellable">
                     <Button
-                        v-if="cancellable"
                         variant="ghost"
                         :disabled="busy"
                         :text="__(cancelText)"
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
@@ -12,6 +12,7 @@ export { default as Checkbox } from './Checkbox/Item.vue';
 export { default as CheckboxGroup } from './Checkbox/Group.vue';
 export { default as CodeEditor } from './CodeEditor.vue';
 export { default as Combobox } from './Combobox/Combobox.vue';
+export { default as ConfirmationModal } from './Modal/ConfirmationModal.vue';
 export { default as Context } from './Context/Context.vue';
 export { default as ContextFooter } from './Context/Footer.vue';
 export { default as ContextHeader } from './Context/Header.vue';
diff --git a/resources/js/pages/layout/Layout.vue b/resources/js/pages/layout/Layout.vue
@@ -49,7 +49,7 @@ provide('layout', {
         />
 
         <confirmation-modal
-            v-if="$root.copyToClipboardModalUrl"
+            :open="$root.copyToClipboardModalUrl !== null"
             :cancellable="false"
             :button-text="__('OK')"
             :title="__('Copy to clipboard')"
diff --git a/resources/js/pages/preferences/nav/Edit.vue b/resources/js/pages/preferences/nav/Edit.vue
@@ -179,7 +179,7 @@
         />
 
         <confirmation-modal
-            v-if="confirmingReset"
+            :open="confirmingReset"
             :title="__('Reset')"
             :bodyText="__('Are you sure you want to reset nav customizations?')"
             :buttonText="__('Reset')"
@@ -189,7 +189,7 @@
         />
 
         <confirmation-modal
-            v-if="confirmingRemoval"
+            :open="confirmingRemoval"
             :title="__('Remove')"
             :bodyText="__('Are you sure you want to remove this section and all of its children?')"
             :buttonText="__('Remove')"
diff --git a/resources/js/pages/users/Passkeys.vue b/resources/js/pages/users/Passkeys.vue
@@ -4,8 +4,7 @@ import { startRegistration, browserSupportsWebAuthn } from '@simplewebauthn/brow
 import { router } from '@inertiajs/vue3';
 import axios from 'axios'
 import Head from '@/pages/layout/Head.vue';
-import { Header, Button, EmptyStateMenu, EmptyStateItem, Listing, DropdownItem, Modal, Input, ModalClose, Field } from '@ui';
-import ConfirmationModal from '@/components/modals/ConfirmationModal.vue';
+import { Header, Button, EmptyStateMenu, EmptyStateItem, Listing, DropdownItem, Modal, ConfirmationModal, Input, ModalClose, Field } from '@ui';
 import { toggleArchitecturalBackground } from '@/pages/layout/architectural-background.js';
 
 const props = defineProps([
diff --git a/resources/js/stories/ConfirmationModal.stories.ts b/resources/js/stories/ConfirmationModal.stories.ts
diff --git a/resources/js/stories/docs/ConfirmationModal.mdx b/resources/js/stories/docs/ConfirmationModal.mdx
diff --git a/resources/js/stories/docs/Modal.mdx b/resources/js/stories/docs/Modal.mdx
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
