231 lines
9.4 KiB
Vue
231 lines
9.4 KiB
Vue
<script setup lang="ts">
|
|
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
|
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
|
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
|
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
|
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
|
|
|
const tableHeaders = [
|
|
{ title: 'Nama', key: 'name' },
|
|
{ title: 'Email', key: 'email' },
|
|
{ title: 'Status', key: 'status' },
|
|
];
|
|
const tableItems = [
|
|
{ name: 'Budi Santoso', email: 'budi@email.com', status: 'Aktif' },
|
|
{ name: 'Siti Rahayu', email: 'siti@email.com', status: 'Nonaktif' },
|
|
{ name: 'Ahmad Fauzi', email: 'ahmad@email.com', status: 'Aktif' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<!-- ============================================================= -->
|
|
<!-- CardHeaderFooter -->
|
|
<!-- ============================================================= -->
|
|
<v-col cols="12">
|
|
<UiParentCard title="CardHeaderFooter — Card dengan Header dan Footer">
|
|
<p class="text-body-1 mb-4">
|
|
<strong>CardHeaderFooter</strong> adalah card outlined yang menyediakan area
|
|
<em>header</em> (judul), <em>konten</em> (slot default), dan <em>footer</em> (slot footer)
|
|
yang dipisahkan oleh garis pembatas.
|
|
</p>
|
|
|
|
<v-table density="compact" class="mb-6">
|
|
<thead>
|
|
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>title</code></td><td>String</td><td>Judul card di bagian header</td></tr>
|
|
</tbody>
|
|
</v-table>
|
|
|
|
<v-table density="compact" class="mb-6">
|
|
<thead>
|
|
<tr><th>Slot</th><th>Keterangan</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>default</code></td><td>Konten utama antara header dan footer</td></tr>
|
|
<tr><td><code>footer</code></td><td>Konten footer (tombol aksi, info, dsb.)</td></tr>
|
|
</tbody>
|
|
</v-table>
|
|
|
|
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
|
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ cardHeaderFooterCode }}</pre>
|
|
</UiChildCard>
|
|
|
|
<UiChildCard title="Demo" class="mb-6">
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<CardHeaderFooter title="Form Pendaftaran">
|
|
<v-text-field label="Nama Lengkap" variant="outlined" density="compact" class="mb-3" />
|
|
<v-text-field label="Email" variant="outlined" density="compact" />
|
|
<template #footer>
|
|
<v-btn color="primary">Simpan</v-btn>
|
|
<v-btn variant="text" class="ml-2">Batal</v-btn>
|
|
</template>
|
|
</CardHeaderFooter>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<CardHeaderFooter title="Konfirmasi Hapus">
|
|
<v-alert type="warning" variant="tonal" class="mb-0">
|
|
Apakah Anda yakin ingin menghapus data ini?
|
|
</v-alert>
|
|
<template #footer>
|
|
<v-spacer />
|
|
<v-btn color="error" class="mr-2">Hapus</v-btn>
|
|
<v-btn variant="outlined">Batal</v-btn>
|
|
</template>
|
|
</CardHeaderFooter>
|
|
</v-col>
|
|
</v-row>
|
|
</UiChildCard>
|
|
</UiParentCard>
|
|
</v-col>
|
|
|
|
<!-- ============================================================= -->
|
|
<!-- UiTableCard -->
|
|
<!-- ============================================================= -->
|
|
<v-col cols="12">
|
|
<UiParentCard title="UiTableCard — Card Wrapper untuk Tabel">
|
|
<p class="text-body-1 mb-4">
|
|
<strong>UiTableCard</strong> adalah card khusus sebagai wrapper tabel data. Slot
|
|
<code>default</code> ditempatkan langsung setelah divider (tanpa padding ekstra)
|
|
agar tabel bisa full-width sesuai card.
|
|
</p>
|
|
|
|
<v-table density="compact" class="mb-6">
|
|
<thead>
|
|
<tr><th>Prop</th><th>Tipe</th><th>Keterangan</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>title</code></td><td>String</td><td>Judul di atas tabel</td></tr>
|
|
</tbody>
|
|
</v-table>
|
|
|
|
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
|
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiTableCardCode }}</pre>
|
|
</UiChildCard>
|
|
|
|
<UiChildCard title="Demo" class="mb-6">
|
|
<UiTableCard title="Daftar Pengguna">
|
|
<v-data-table
|
|
:headers="tableHeaders"
|
|
:items="tableItems"
|
|
hide-default-footer
|
|
density="compact"
|
|
/>
|
|
</UiTableCard>
|
|
</UiChildCard>
|
|
</UiParentCard>
|
|
</v-col>
|
|
|
|
<!-- ============================================================= -->
|
|
<!-- UiParentCardLogo -->
|
|
<!-- ============================================================= -->
|
|
<v-col cols="12">
|
|
<UiParentCard title="UiParentCardLogo — Card dengan Logo Aplikasi">
|
|
<p class="text-body-1 mb-4">
|
|
<strong>UiParentCardLogo</strong> sama seperti UiParentCard tetapi menampilkan
|
|
<em>Logo aplikasi</em> (komponen <code>Logo.vue</code>) di header alih-alih teks judul.
|
|
Cocok digunakan pada halaman auth (login, register, dsb.).
|
|
</p>
|
|
|
|
<v-table density="compact" class="mb-6">
|
|
<thead>
|
|
<tr><th>Slot</th><th>Keterangan</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>default</code></td><td>Konten utama di bawah logo</td></tr>
|
|
<tr><td><code>action</code></td><td>Aksi di sebelah kanan logo</td></tr>
|
|
</tbody>
|
|
</v-table>
|
|
|
|
<UiChildCard title="Contoh Penggunaan" class="mb-6">
|
|
<pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardLogoCode }}</pre>
|
|
</UiChildCard>
|
|
|
|
<UiChildCard title="Demo">
|
|
<v-row justify="center">
|
|
<v-col cols="12" md="5">
|
|
<UiParentCardLogo>
|
|
<template #action>
|
|
<v-chip color="primary" size="small">v1.0</v-chip>
|
|
</template>
|
|
<p class="text-body-2 text-center mt-2">
|
|
Silakan masuk untuk melanjutkan. Slot <code>default</code> berisi
|
|
form login atau konten lainnya.
|
|
</p>
|
|
</UiParentCardLogo>
|
|
</v-col>
|
|
</v-row>
|
|
</UiChildCard>
|
|
</UiParentCard>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
cardHeaderFooterCode: `<template>
|
|
<CardHeaderFooter title="Form Pendaftaran">
|
|
<!-- Slot default: konten di antara header & footer -->
|
|
<v-text-field label="Nama Lengkap" variant="outlined" />
|
|
<v-text-field label="Email" variant="outlined" />
|
|
|
|
<!-- Slot footer: tombol aksi -->
|
|
<template #footer>
|
|
<v-btn color="primary">Simpan</v-btn>
|
|
<v-btn variant="text">Batal</v-btn>
|
|
</template>
|
|
</CardHeaderFooter>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import CardHeaderFooter from '@/components/shared/CardHeaderFooter.vue';
|
|
<\/script>`,
|
|
|
|
uiTableCardCode: `<template>
|
|
<UiTableCard title="Daftar Pengguna">
|
|
<!-- Letakkan v-data-table atau v-table langsung sebagai slot default -->
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="items"
|
|
hide-default-footer
|
|
/>
|
|
</UiTableCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UiTableCard from '@/components/shared/UiTableCard.vue';
|
|
|
|
const headers = [
|
|
{ title: 'Nama', key: 'name' },
|
|
{ title: 'Email', key: 'email' },
|
|
];
|
|
const items = [
|
|
{ name: 'Budi', email: 'budi@email.com' },
|
|
];
|
|
<\/script>`,
|
|
|
|
uiParentCardLogoCode: `<template>
|
|
<!-- Cocok untuk halaman auth / landing -->
|
|
<UiParentCardLogo>
|
|
<template #action>
|
|
<v-chip color="primary" size="small">v1.0</v-chip>
|
|
</template>
|
|
|
|
<!-- Konten form login/register di sini -->
|
|
<LoginForm />
|
|
</UiParentCardLogo>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import UiParentCardLogo from '@/components/shared/UiParentCardLogo.vue';
|
|
<\/script>`,
|
|
};
|
|
}
|
|
};
|
|
</script>
|