From a6c7189d2c892be961f4955cb138d99dd19f3165 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 22 Oct 2025 16:43:52 +0200
Subject: [PATCH 1/5] fup

---
 .../src/components/OmegaForm/blockDialog.ts   |  7 +-
 .../stories/OmegaForm.stories.ts              |  8 ++
 .../OmegaForm/DialogBlockingExamples.vue      | 73 +++++++++++++++++++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue

diff --git a/packages/vue-components/src/components/OmegaForm/blockDialog.ts b/packages/vue-components/src/components/OmegaForm/blockDialog.ts
index 9454a268d3..ca1e65076f 100644
--- a/packages/vue-components/src/components/OmegaForm/blockDialog.ts
+++ b/packages/vue-components/src/components/OmegaForm/blockDialog.ts
@@ -35,7 +35,12 @@ export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
 }
 
 export const useOnClose = (close: () => void) => {
-  const bus = provideBus()
+  // Use existing bus if available, otherwise provide a new one
+  let bus = injectBus()
+  if (!bus) {
+    bus = provideBus()
+  }
+
   const onClose = () => {
     const evt: DialogClosing = {}
     bus.emit("dialog-closing", evt)
diff --git a/packages/vue-components/stories/OmegaForm.stories.ts b/packages/vue-components/stories/OmegaForm.stories.ts
index 0c99c1e77c..ee7ac06757 100644
--- a/packages/vue-components/stories/OmegaForm.stories.ts
+++ b/packages/vue-components/stories/OmegaForm.stories.ts
@@ -10,6 +10,7 @@ import ClearableComponent from "./OmegaForm/Clearable.vue"
 import ComplexFormComponent from "./OmegaForm/ComplexForm.vue"
 import CreateUseFormWithCustomInputComponent from "./OmegaForm/CreateUseFormWithCustomInput.vue"
 import DateComponent from "./OmegaForm/Date.vue"
+import DialogBlockingExamplesComponent from "./OmegaForm/DialogBlockingExamples.vue"
 import EmailFormComponent from "./OmegaForm/EmailForm.vue"
 import FormInputComponent from "./OmegaForm/form.Input.vue"
 import IntersectionExampleComponent from "./OmegaForm/IntersectionExample.vue"
@@ -199,3 +200,10 @@ export const SetErrorOnSubmit: Story = {
     template: "<SetErrorOnSubmitComponent />"
   })
 }
+
+export const DialogBlockingExamples: Story = {
+  render: () => ({
+    components: { DialogBlockingExamplesComponent },
+    template: "<DialogBlockingExamplesComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
new file mode 100644
index 0000000000..2427569c7d
--- /dev/null
+++ b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="pa-4">
+    <h1 class="text-h4 mb-4">
+      Dialog Exit Blocking
+    </h1>
+    <p class="mb-6">
+      Forms automatically prevent dialog closing when dirty. Try editing and pressing Escape or clicking outside.
+    </p>
+
+    <v-card>
+      <v-card-text>
+        <p class="mb-4">
+          Edit the form and try to close. You'll see: "Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?"
+        </p>
+        <v-btn @click="open = true">
+          Open Dialog
+        </v-btn>
+
+        <Dialog v-model="open">
+          <template #default="{ cancel }">
+            <v-card max-width="600">
+              <v-card-title class="d-flex justify-space-between align-center">
+                Edit User
+                <v-btn
+                  icon="mdi-close"
+                  variant="text"
+                  size="small"
+                  @click="cancel"
+                />
+              </v-card-title>
+              <v-card-text>
+                <form.Form>
+                  <form.Input
+                    label="Name"
+                    name="name"
+                  />
+                  <form.Input
+                    label="Email"
+                    name="email"
+                  />
+                </form.Form>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn
+                  variant="text"
+                  @click="cancel"
+                >
+                  Cancel
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+          </template>
+        </Dialog>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import { provideBus } from "../../src/components/OmegaForm/blockDialog"
+import { useOmegaForm } from "../../src/components/OmegaForm/useOmegaForm"
+
+provideBus()
+
+const open = ref(false)
+const form = useOmegaForm(
+  S.Struct({ name: S.String, email: S.String }),
+  { defaultValues: { name: "", email: "" } }
+)
+</script>

From dfdb4768df9e0c2bbeb66fd9ac4f730185d7f02d Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 22 Oct 2025 17:15:26 +0200
Subject: [PATCH 2/5] feat: Add support for preventing dialog close events in
 OmegaForm Wrapper

---
 .../src/components/OmegaForm/OmegaWrapper.vue          | 10 ++++++++++
 .../src/components/OmegaForm/useOmegaForm.ts           |  6 ++----
 .../stories/OmegaForm/DialogBlockingExamples.vue       |  3 ---
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
index bfc9306b3a..2d1faafef5 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
@@ -30,6 +30,7 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useStore } from "@tanstack/vue-form"
+import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
 import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
 import { type OmegaFormReturn } from "./useOmegaForm"
@@ -52,6 +53,15 @@ const subscribedValues = getOmegaStore(
   props.subscribe
 )
 
+if (!props.form.ignorePreventCloseEvents) {
+  console.log(props.form.ignorePreventCloseEvents)
+  usePreventClose(() => {
+    const v = props.form.useStore((state) => state.isDirty)
+    console.log(123, v)
+    return v
+  })
+}
+
 defineSlots<{
   default(props: { subscribedValues: typeof subscribedValues.value }): void
 }>()
diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
index 2128aa41f7..91d42f261c 100644
--- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
+++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
@@ -129,6 +129,7 @@ export interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
   clear: () => void
   i18nNamespace?: string
+  ignorePreventCloseEvents?: boolean
   registerField: (
     field: ComputedRef<{
       name: string
@@ -870,6 +871,7 @@ export const useOmegaForm = <
 
   const formWithExtras: OF<From, To> = Object.assign(form, {
     i18nNamespace: omegaConfig?.i18nNamespace,
+    ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
     meta,
     clear,
     handleSubmit: (meta?: Record<string, any>) => {
@@ -886,10 +888,6 @@ export const useOmegaForm = <
 
   const errorContext = { form: formWithExtras, fieldMap }
 
-  if (!omegaConfig?.ignorePreventCloseEvents) {
-    usePreventClose(() => formWithExtras.useStore((state) => state.isDirty))
-  }
-
   return Object.assign(formWithExtras, {
     errorContext,
     Form: fHoc(formWithExtras)(OmegaForm as any) as any,
diff --git a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
index 2427569c7d..4f49330479 100644
--- a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
+++ b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
@@ -60,11 +60,8 @@
 import { S } from "effect-app"
 import { ref } from "vue"
 import Dialog from "../../src/components/Dialog.vue"
-import { provideBus } from "../../src/components/OmegaForm/blockDialog"
 import { useOmegaForm } from "../../src/components/OmegaForm/useOmegaForm"
 
-provideBus()
-
 const open = ref(false)
 const form = useOmegaForm(
   S.Struct({ name: S.String, email: S.String }),

From 0a0876ba0658842787fe326fa780b82d3398940e Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 22 Oct 2025 18:26:45 +0200
Subject: [PATCH 3/5] feat: Refactor Dialog and OmegaWrapper components for
 improved slot handling and prevent close functionality

---
 .../vue-components/src/components/Dialog.vue  | 13 +++++++--
 .../src/components/OmegaForm/OmegaWrapper.vue |  5 ++--
 .../src/components/OmegaForm/useOmegaForm.ts  |  1 -
 .../OmegaForm/DialogBlockingExamples.vue      | 28 +++++++++++--------
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/vue-components/src/components/Dialog.vue b/packages/vue-components/src/components/Dialog.vue
index 019dd47837..e39a6211dd 100644
--- a/packages/vue-components/src/components/Dialog.vue
+++ b/packages/vue-components/src/components/Dialog.vue
@@ -14,7 +14,7 @@
     <!-- pass down slots -->
     <!-- @vue-skip -->
     <template
-      v-for="(_, name) in $slots"
+      v-for="(_, name) in otherSlots"
       #[name]="slotData"
     >
       <slot
@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue"
 import { useOnClose } from "./OmegaForm/blockDialog"
 import { onMountedWithCleanup } from "./OmegaForm/onMountedWithCleanup"
 
@@ -35,7 +36,15 @@ const props = defineProps<{
 
 const open = defineModel<boolean>({ default: false })
 
-const onCancel = useOnClose(() => open.value = false)
+const slots = useSlots()
+const otherSlots = computed(() => {
+  const { default: _, ...rest } = slots
+  return rest
+})
+
+const onCancel = useOnClose(() => {
+  return open.value = false
+})
 
 onMountedWithCleanup(() => {
   const onEscape = (e: KeyboardEvent) => {
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
index 2d1faafef5..83ee4a7a13 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaWrapper.vue
@@ -30,6 +30,7 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useStore } from "@tanstack/vue-form"
+import { defineSlots } from "vue"
 import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
 import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
@@ -56,9 +57,7 @@ const subscribedValues = getOmegaStore(
 if (!props.form.ignorePreventCloseEvents) {
   console.log(props.form.ignorePreventCloseEvents)
   usePreventClose(() => {
-    const v = props.form.useStore((state) => state.isDirty)
-    console.log(123, v)
-    return v
+    return props.form.useStore((state) => state.isDirty)
   })
 }
 
diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
index 91d42f261c..0839ddb6a7 100644
--- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
+++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts
@@ -7,7 +7,6 @@ import { Array, Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
 import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from "vue"
-import { usePreventClose } from "./blockDialog"
 import { MergedInputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
 import OmegaAutoGen from "./OmegaAutoGen.vue"
diff --git a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
index 4f49330479..1789a63032 100644
--- a/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
+++ b/packages/vue-components/stories/OmegaForm/DialogBlockingExamples.vue
@@ -21,22 +21,16 @@
             <v-card max-width="600">
               <v-card-title class="d-flex justify-space-between align-center">
                 Edit User
-                <v-btn
-                  icon="mdi-close"
-                  variant="text"
-                  size="small"
-                  @click="cancel"
-                />
               </v-card-title>
               <v-card-text>
-                <form.Form>
+                <form.Form id="my-form">
                   <form.Input
                     label="Name"
                     name="name"
                   />
                   <form.Input
-                    label="Email"
-                    name="email"
+                    label="Mimmo"
+                    name="mimmo"
                   />
                 </form.Form>
               </v-card-text>
@@ -47,6 +41,13 @@
                 >
                   Cancel
                 </v-btn>
+                <v-btn
+                  active
+                  type="submit"
+                  form="my-form"
+                >
+                  submit
+                </v-btn>
               </v-card-actions>
             </v-card>
           </template>
@@ -64,7 +65,12 @@ import { useOmegaForm } from "../../src/components/OmegaForm/useOmegaForm"
 
 const open = ref(false)
 const form = useOmegaForm(
-  S.Struct({ name: S.String, email: S.String }),
-  { defaultValues: { name: "", email: "" } }
+  S.Struct({ name: S.NonEmptyString, mimmo: S.NonEmptyString }),
+  {
+    onSubmit: async ({ value }) => {
+      console.log(value)
+      open.value = false
+    }
+  }
 )
 </script>

From 1c7aee30f9bce53c7c2641ce5c923a75685f4610 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 22 Oct 2025 19:03:04 +0200
Subject: [PATCH 4/5] bump

---
 .changeset/witty-crabs-glow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/witty-crabs-glow.md

diff --git a/.changeset/witty-crabs-glow.md b/.changeset/witty-crabs-glow.md
new file mode 100644
index 0000000000..cb86033103
--- /dev/null
+++ b/.changeset/witty-crabs-glow.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+Moves modal state to Form component

From 13b31e19747b89c3a7f20d2c787c71f199bf9a61 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 22 Oct 2025 19:23:07 +0200
Subject: [PATCH 5/5] feat: Add story examples for dialog components with
 blocking functionality

---
 .../vue-components/stories/Dialog.stories.ts  |  34 ++++++
 .../stories/Dialog/AsyncBlocking.vue          |  46 ++++++++
 .../stories/Dialog/AsyncBlockingContent.vue   |  91 +++++++++++++++
 .../stories/Dialog/SimpleBlocking.vue         |  49 ++++++++
 .../stories/Dialog/SimpleBlockingContent.vue  |  30 +++++
 .../stories/Dialog/UploadBlocking.vue         |  46 ++++++++
 .../stories/Dialog/UploadBlockingContent.vue  | 105 ++++++++++++++++++
 7 files changed, 401 insertions(+)
 create mode 100644 packages/vue-components/stories/Dialog.stories.ts
 create mode 100644 packages/vue-components/stories/Dialog/AsyncBlocking.vue
 create mode 100644 packages/vue-components/stories/Dialog/AsyncBlockingContent.vue
 create mode 100644 packages/vue-components/stories/Dialog/SimpleBlocking.vue
 create mode 100644 packages/vue-components/stories/Dialog/SimpleBlockingContent.vue
 create mode 100644 packages/vue-components/stories/Dialog/UploadBlocking.vue
 create mode 100644 packages/vue-components/stories/Dialog/UploadBlockingContent.vue

diff --git a/packages/vue-components/stories/Dialog.stories.ts b/packages/vue-components/stories/Dialog.stories.ts
new file mode 100644
index 0000000000..e9e9a6c5f8
--- /dev/null
+++ b/packages/vue-components/stories/Dialog.stories.ts
@@ -0,0 +1,34 @@
+import type { Meta as StoryMeta, StoryObj } from "@storybook/vue3"
+import Dialog from "../src/components/Dialog.vue"
+import AsyncBlockingComponent from "./Dialog/AsyncBlocking.vue"
+import SimpleBlockingComponent from "./Dialog/SimpleBlocking.vue"
+import UploadBlockingComponent from "./Dialog/UploadBlocking.vue"
+
+const meta: StoryMeta<typeof Dialog> = {
+  title: "Components/Dialog",
+  component: Dialog
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+export const SimpleBlocking: Story = {
+  render: () => ({
+    components: { SimpleBlockingComponent },
+    template: "<SimpleBlockingComponent />"
+  })
+}
+
+export const AsyncBlocking: Story = {
+  render: () => ({
+    components: { AsyncBlockingComponent },
+    template: "<AsyncBlockingComponent />"
+  })
+}
+
+export const UploadBlocking: Story = {
+  render: () => ({
+    components: { UploadBlockingComponent },
+    template: "<UploadBlockingComponent />"
+  })
+}
diff --git a/packages/vue-components/stories/Dialog/AsyncBlocking.vue b/packages/vue-components/stories/Dialog/AsyncBlocking.vue
new file mode 100644
index 0000000000..79312ecc9a
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/AsyncBlocking.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Async Blocking with Custom Modal
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>injectBus()</code> and <code>evt.prevent = Promise&lt;boolean&gt;</code> to use a custom modal instead of native confirm.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Create Project
+          </v-card-title>
+          <v-card-text>
+            <AsyncBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="cancel"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import AsyncBlockingContent from "./AsyncBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue b/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue
new file mode 100644
index 0000000000..16c8bf3bc9
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/AsyncBlockingContent.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Blocking enabled: <strong>{{ shouldBlock }}</strong>
+    </p>
+    <p class="mb-4">
+      Toggle the switch and try to close. You'll see a custom modal with Allow/Prevent options.
+    </p>
+
+    <v-switch
+      v-model="shouldBlock"
+      label="Enable blocking"
+      color="primary"
+    />
+
+    <p class="mt-4 text-body-2">
+      This uses <code>evt.prevent = Promise&lt;boolean&gt;</code> for async blocking with a custom modal.
+    </p>
+
+    <!-- Custom Confirmation Modal -->
+    <v-dialog
+      v-model="showConfirm"
+      max-width="400"
+      persistent
+    >
+      <v-card>
+        <v-card-title class="bg-warning">
+          Confirm Close
+        </v-card-title>
+        <v-card-text class="pt-4">
+          The blocking is enabled. What would you like to do?
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            variant="text"
+            @click="handlePrevent"
+          >
+            Prevent (Stay)
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            @click="handleAllow"
+          >
+            Allow (Close)
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { type DialogClosing, injectBus } from "../../src/components/OmegaForm/blockDialog"
+import { onMountedWithCleanup } from "../../src/components/OmegaForm/onMountedWithCleanup"
+
+const shouldBlock = ref(false)
+const showConfirm = ref(false)
+let confirmResolver: ((allow: boolean) => void) | null = null
+
+const bus = injectBus()
+
+if (bus) {
+  onMountedWithCleanup(() => {
+    const handler = (evt: DialogClosing) => {
+      if (shouldBlock.value) {
+        evt.prevent = new Promise((resolve) => {
+          confirmResolver = resolve
+          showConfirm.value = true
+        })
+      }
+    }
+
+    bus.on("dialog-closing", handler)
+    return () => bus.off("dialog-closing", handler)
+  })
+}
+
+const handlePrevent = () => {
+  showConfirm.value = false
+  confirmResolver?.(false) // Prevent close
+  confirmResolver = null
+}
+
+const handleAllow = () => {
+  showConfirm.value = false
+  confirmResolver?.(true) // Allow close
+  confirmResolver = null
+}
+</script>
diff --git a/packages/vue-components/stories/Dialog/SimpleBlocking.vue b/packages/vue-components/stories/Dialog/SimpleBlocking.vue
new file mode 100644
index 0000000000..f4a4e50b5a
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/SimpleBlocking.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Simple Sync Blocking
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>usePreventClose()</code> - the simplest way to block dialog closing with a native confirm.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Edit User
+          </v-card-title>
+          <v-card-text>
+            <SimpleBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="() => {
+                console.log('cancel')
+                cancel()
+              }"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import SimpleBlockingContent from "./SimpleBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue b/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue
new file mode 100644
index 0000000000..2c089810c7
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/SimpleBlockingContent.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Blocking enabled: <strong>{{ shouldBlock }}</strong>
+    </p>
+    <p class="mb-4">
+      Toggle the switch and try to close. When enabled, you'll see: "Es sind ungespeicherte Änderungen vorhanden.
+      Wirklich schließen?"
+    </p>
+
+    <v-switch
+      v-model="shouldBlock"
+      label="Enable blocking"
+      color="primary"
+    />
+
+    <p class="mt-4 text-body-2">
+      This uses <code>usePreventClose(() => shouldBlock)</code> to sync block the dialog.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { usePreventClose } from "../../src/components/OmegaForm/blockDialog"
+
+const shouldBlock = ref(false)
+
+usePreventClose(() => shouldBlock)
+</script>
diff --git a/packages/vue-components/stories/Dialog/UploadBlocking.vue b/packages/vue-components/stories/Dialog/UploadBlocking.vue
new file mode 100644
index 0000000000..f9d902fe8d
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/UploadBlocking.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="pa-4">
+    <h2 class="text-h5 mb-4">
+      Upload Progress Blocking
+    </h2>
+    <p class="mb-4">
+      Demonstrates <code>injectBus()</code> and <code>evt.prevent = true</code> to conditionally block based on operation state.
+    </p>
+
+    <v-btn @click="open = true">
+      Open Dialog
+    </v-btn>
+
+    <Dialog v-model="open">
+      <template #default="{ cancel }">
+        <v-card
+          min-width="400"
+          max-width="600"
+        >
+          <v-card-title>
+            Upload Files
+          </v-card-title>
+          <v-card-text>
+            <UploadBlockingContent />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              variant="text"
+              @click="cancel"
+            >
+              Cancel
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Dialog from "../../src/components/Dialog.vue"
+import UploadBlockingContent from "./UploadBlockingContent.vue"
+
+const open = ref(false)
+</script>
diff --git a/packages/vue-components/stories/Dialog/UploadBlockingContent.vue b/packages/vue-components/stories/Dialog/UploadBlockingContent.vue
new file mode 100644
index 0000000000..4edf695d78
--- /dev/null
+++ b/packages/vue-components/stories/Dialog/UploadBlockingContent.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <p class="mb-4 text-caption">
+      Upload in progress: <strong>{{ uploadInProgress }}</strong>
+    </p>
+    <p class="mb-4">
+      Click "Start Upload" to simulate a file upload. Try to close while uploading - you'll get a confirmation asking if
+      you want to cancel the upload.
+    </p>
+
+    <v-text-field
+      v-model="fileName"
+      label="File Name"
+      variant="outlined"
+      :disabled="uploadInProgress"
+    />
+
+    <v-btn
+      class="mt-2"
+      :disabled="uploadInProgress"
+      @click="startUpload"
+    >
+      {{ uploadInProgress ? `Uploading... ${uploadProgress}%` : "Start Upload" }}
+    </v-btn>
+
+    <v-progress-linear
+      v-if="uploadInProgress"
+      :model-value="uploadProgress"
+      class="mt-4"
+      color="primary"
+      height="20"
+    >
+      <template #default="{ value }">
+        <strong>{{ Math.ceil(value) }}%</strong>
+      </template>
+    </v-progress-linear>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { type DialogClosing, injectBus } from "../../src/components/OmegaForm/blockDialog"
+import { onMountedWithCleanup } from "../../src/components/OmegaForm/onMountedWithCleanup"
+
+const fileName = ref("document.pdf")
+const uploadInProgress = ref(false)
+const uploadProgress = ref(0)
+let uploadInterval: ReturnType<typeof setInterval> | null = null
+
+const bus = injectBus()
+
+const cancelUpload = () => {
+  if (uploadInterval) {
+    clearInterval(uploadInterval)
+    uploadInterval = null
+  }
+  uploadInProgress.value = false
+  uploadProgress.value = 0
+}
+
+const completeUpload = () => {
+  if (uploadInterval) {
+    clearInterval(uploadInterval)
+    uploadInterval = null
+  }
+  uploadInProgress.value = false
+  uploadProgress.value = 0
+}
+
+if (bus) {
+  onMountedWithCleanup(() => {
+    const handler = (evt: DialogClosing) => {
+      if (uploadInProgress.value) {
+        const confirmed = confirm(
+          "File upload is in progress. Closing will cancel the upload. Continue?"
+        )
+        if (!confirmed) {
+          evt.prevent = true
+        } else {
+          // Cancel the upload
+          cancelUpload()
+        }
+      }
+    }
+
+    bus.on("dialog-closing", handler)
+    return () => {
+      bus.off("dialog-closing", handler)
+      cancelUpload()
+    }
+  })
+}
+
+const startUpload = () => {
+  uploadInProgress.value = true
+  uploadProgress.value = 0
+
+  uploadInterval = setInterval(() => {
+    uploadProgress.value += 10
+    if (uploadProgress.value >= 100) {
+      completeUpload()
+    }
+  }, 500)
+}
+</script>