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 6 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> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts">
interface Props { import { Vue, Component, Prop, toNative } from 'vue-facing-decorator'
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 => { @Component
handleClose() 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> </script>
<style scoped> <style scoped>

10
test-apps/daily-notification-test/src/components/ui/LoadingOverlay.vue

@ -18,8 +18,14 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script lang="ts">
// Loading overlay component - no props or logic needed 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> </script>
<style scoped> <style scoped>

Loading…
Cancel
Save