5ad286a44e
todo: blood input section * ui: patch focus ring state * layouts-pages: fix width layout calculation feat(treatment-report): add fill-notes component and validation messages - Add new FillNotes component for tissue notes input with dynamic fields - Update schema validation with required error messages for operation and specimen fields - Adjust form layout to include new FillNotes component and improve field organization cherry-pick arrangement procedure from feat/protokol-terapi-116
86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import CardContent from '~/components/pub/ui/card/CardContent.vue'
|
|
|
|
const route = useRoute()
|
|
|
|
// Ambil meta dan set default
|
|
const contentFrame = computed(() => route.meta.contentFrame ?? 'cf-container-lg')
|
|
|
|
// Mapping aman supaya tidak ada class invalid
|
|
const contentFrameClass = computed(() => {
|
|
const allowed = [
|
|
'cf-container-2xl',
|
|
'cf-container-xl',
|
|
'cf-container-lg',
|
|
'cf-container-md',
|
|
'cf-container-sm',
|
|
'cf-full-width',
|
|
'cf-no-frame',
|
|
]
|
|
return allowed.includes(contentFrame.value as string) ? contentFrame.value : 'cf-container-lg'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarProvider>
|
|
<LayoutAppSidebar />
|
|
|
|
<SidebarInset>
|
|
<LayoutHeader />
|
|
|
|
<!-- Outer wrapper always full width -->
|
|
<div class="flex w-full justify-center p-4 2xl:p-5">
|
|
<!-- Frame mode (container + card) -->
|
|
<template v-if="contentFrameClass !== 'cf-no-frame'">
|
|
<div :class="['content-frame', contentFrameClass]">
|
|
<Card>
|
|
<CardContent>
|
|
<slot />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- No frame → direct slot -->
|
|
<template v-else>
|
|
<slot />
|
|
</template>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Base: semua frame full width by default */
|
|
.content-frame {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Max-width container variants */
|
|
.cf-container-2xl {
|
|
max-width: 1400px;
|
|
}
|
|
|
|
.cf-container-xl {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.cf-container-lg {
|
|
max-width: 992px;
|
|
}
|
|
|
|
.cf-container-md {
|
|
max-width: 768px;
|
|
}
|
|
|
|
.cf-container-sm {
|
|
max-width: 576px;
|
|
}
|
|
|
|
/* Full width (no max width) */
|
|
.cf-full-width {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|