Browse Source

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.
master
Matthew Raymer 5 days ago
parent
commit
6c21a67088
  1. 31
      test-apps/daily-notification-test/src/components/ui/ErrorDialog.vue
  2. 10
      test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue

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

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

Loading…
Cancel
Save