73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
title?: string
|
|
loading?: boolean
|
|
error?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
retry: []
|
|
create: []
|
|
refresh: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ks-list-page">
|
|
<div v-if="title" class="ks-list-page__header">
|
|
<h1 class="ks-list-page__title">{{ title }}</h1>
|
|
<div class="ks-list-page__actions">
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ks-list-page__search">
|
|
<slot name="search" />
|
|
</div>
|
|
|
|
<div class="ks-list-page__content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ks-list-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--ks-space-4);
|
|
}
|
|
|
|
.ks-list-page__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ks-list-page__title {
|
|
font-size: var(--ks-font-page);
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.ks-list-page__actions {
|
|
display: flex;
|
|
gap: var(--ks-space-2);
|
|
}
|
|
|
|
.ks-list-page__search {
|
|
padding: var(--ks-space-4);
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
}
|
|
|
|
.ks-list-page__content {
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border);
|
|
border-radius: var(--ks-radius-md);
|
|
}
|
|
</style>
|