From 6c21a6708828af6dbc2f2cacd82981b4686acf6a Mon Sep 17 00:00:00 2001
From: Matthew Raymer <mraymer@osinetwork.net>
Date: Thu, 16 Oct 2025 13:06:23 +0000
Subject: [PATCH] refactor(test-app): convert dialog and overlay components to
 Class API

- Convert ErrorDialog to Class API with proper event handling
- Convert LoadingOverlay to Class API with visibility prop
- Add proper @Prop decorators and event emission methods
- Simplify component logic for better maintainability

Completes UI component conversion to vue-facing-decorator pattern.
---
 .../src/components/ui/ErrorDialog.vue         | 31 ++++++-------------
 .../src/components/ui/LoadingOverlay.vue      | 10 ++++--
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/test-apps/daily-notification-test/src/components/ui/ErrorDialog.vue b/test-apps/daily-notification-test/src/components/ui/ErrorDialog.vue
index 0375d43..0a99b3a 100644
--- a/test-apps/daily-notification-test/src/components/ui/ErrorDialog.vue
+++ b/test-apps/daily-notification-test/src/components/ui/ErrorDialog.vue
@@ -33,30 +33,17 @@
   </div>
 </template>
 
-<script setup lang="ts">
-interface Props {
-  message: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  close: []
-  retry: []
-}>()
-
-const handleClose = (): void => {
-  emit('close')
-}
-
-const handleRetry = (): void => {
-  emit('retry')
-  emit('close')
-}
+<script lang="ts">
+import { Vue, Component, Prop, toNative } from 'vue-facing-decorator'
 
-const handleOverlayClick = (): void => {
-  handleClose()
+@Component
+class ErrorDialog extends Vue {
+  @Prop({ type: String, required: true }) message!: string
+  handleOverlayClick() { this.$emit('close') }
+  handleClose() { this.$emit('close') }
+  handleRetry() { this.$emit('retry') }
 }
+export default toNative(ErrorDialog)
 </script>
 
 <style scoped>
diff --git a/test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue b/test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue
index 1b53393..36f52c2 100644
--- a/test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue
+++ b/test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue
@@ -18,8 +18,14 @@
   </div>
 </template>
 
-<script setup lang="ts">
-// Loading overlay component - no props or logic needed
+<script lang="ts">
+import { Vue, Component, Prop, toNative } from 'vue-facing-decorator'
+
+@Component
+class LoadingOverlay extends Vue {
+  @Prop({ type: Boolean, default: false }) visible!: boolean
+}
+export default toNative(LoadingOverlay)
 </script>
 
 <style scoped>