skytek_xinliang
cad44db4c7
Add inline comments to page components documenting how page models, v-model state, and emitted user intents flow through the page driver. This clarifies that page components remain presentation-focused while routing, dialog state, CRUD side effects, and command handling stay in the page driver or related composables.docs(pages): clarify page driver component boundaries Add inline comments to page components documenting how page models, v-model state, and emitted user intents flow through the page driver. This clarifies that page components remain presentation-focused while routing, dialog state, CRUD side effects, and command handling stay in the page driver or related composables.
47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
title: string
|
|
backLabel?: string
|
|
error?: string
|
|
loading?: boolean
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
backLabel: '返回',
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
search: []
|
|
back: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<v-container fluid class="pt-2 px-1">
|
|
<v-card class="mb-2">
|
|
<v-card-title class="text-title-large bg-primary">{{ title }}</v-card-title>
|
|
<v-card-text class="pa-4">
|
|
<v-alert v-if="error" class="mb-4" type="error" variant="tonal">{{ error }}</v-alert>
|
|
<v-row density="compact" align="center">
|
|
<slot name="filters" />
|
|
<v-col cols="12" md="auto" class="d-md-flex justify-md-end pr-md-2">
|
|
<v-btn color="primary" :loading="loading" @click="emit('search')">查詢</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<v-card v-if="$slots.results">
|
|
<v-card-text>
|
|
<slot name="results" />
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<slot name="sections" />
|
|
|
|
<v-row class="pa-4">
|
|
<v-btn variant="tonal" @click="emit('back')">{{ backLabel }}</v-btn>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|