Vuetify 4 is a Material-Design-3 styling refresh with revert snippets, not a component-API overhaul. FC's exposure was small: - Bump vuetify ^4, vite-plugin-vuetify ^2.1.0, vue ^3.5, engines node>=24. - Restore the dropped global CSS reset (minimal reset from the upgrade guide) in Vuetify's own low-precedence reset layer, so FC's margin-zeroing assumptions hold. - v-row prop→utility: 'dense' → density=compact (×3), align=center → class=align-center. - v-snackbar: multi-line removed → min-height=68. - v-autocomplete #item slot: item→internalItem (item now aliases raw) in TagPicker + GalleryFilterBar (item.raw.* → internalItem.raw.*). ACCEPTED (cosmetic, operator reviews live per plan #158): MD3 typography (text-body-2 ×73), non-uppercase buttons (v4 dropped the uppercase default), MD3 elevation. CI verifies BUILD only — the LOOK is the live-review pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
27 lines
612 B
Vue
27 lines
612 B
Vue
<template>
|
|
<v-snackbar
|
|
v-model="show" :color="color" location="bottom right" timeout="4000"
|
|
min-height="68" elevation="4"
|
|
>
|
|
{{ message }}
|
|
<template #actions>
|
|
<v-btn variant="text" @click="show = false">Dismiss</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const show = ref(false)
|
|
const message = ref('')
|
|
const color = ref('error')
|
|
|
|
function open({ text, type = 'error' }) {
|
|
message.value = text
|
|
color.value = type === 'error' ? 'error' : type === 'success' ? 'success' : 'info'
|
|
show.value = true
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|