kjh2064
b12fc7411d
- Create useFormFieldNavigation composable for Tab-like Enter behavior - KsTextField: Enter -> next field - KsTextArea: Ctrl+Enter for newline, Enter -> next field - KsSelect: Enter -> next field after selection - Implements standard form navigation pattern across input components
80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div class="ks-dashboard">
|
|
<section v-if="$slots.kpis" class="ks-dashboard__kpis">
|
|
<slot name="kpis" />
|
|
</section>
|
|
|
|
<div class="ks-dashboard__body">
|
|
<section v-if="$slots.primary" class="ks-dashboard__primary ks-card">
|
|
<slot name="primary" />
|
|
</section>
|
|
|
|
<div class="ks-dashboard__side">
|
|
<section v-if="$slots.secondary" class="ks-dashboard__secondary ks-card">
|
|
<slot name="secondary" />
|
|
</section>
|
|
<section v-if="$slots.alerts" class="ks-dashboard__alerts ks-card">
|
|
<slot name="alerts" />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ks-dashboard {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
gap: var(--ks-space-3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ks-dashboard__kpis {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
|
|
gap: var(--ks-space-3);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ks-dashboard__body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 360px;
|
|
gap: var(--ks-space-3);
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ks-dashboard__primary {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--ks-space-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ks-dashboard__side {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ks-space-3);
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ks-dashboard__secondary,
|
|
.ks-dashboard__alerts {
|
|
padding: var(--ks-space-3);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.ks-dashboard__body {
|
|
grid-template-columns: 1fr;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|