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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user