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.
This commit is contained in:
Matthew Raymer
2025-10-16 13:06:23 +00:00
parent 8c3825363e
commit 6c21a67088
2 changed files with 18 additions and 25 deletions

View File

@@ -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')
}
const handleOverlayClick = (): void => {
handleClose()
<script lang="ts">
import { Vue, Component, Prop, toNative } from 'vue-facing-decorator'
@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>

View File

@@ -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>