188 lines
8.5 KiB
Vue
188 lines
8.5 KiB
Vue
<script setup lang="ts">
|
|
import UiParentCard from '@/components/shared/UiParentCard.vue';
|
|
import UiChildCard from '@/components/shared/UiChildCard.vue';
|
|
import WidgetCard from '@/components/shared/WidgetCard.vue';
|
|
import WidgetCardv2 from '@/components/shared/WidgetCardv2.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<v-row>
|
|
<!-- ============================================================= -->
|
|
<!-- WidgetCard -->
|
|
<!-- ============================================================= -->
|
|
<v-col cols="12">
|
|
<UiParentCard title="WidgetCard — Card Widget Sederhana">
|
|
<p class="text-body-1 mb-4">
|
|
<strong>WidgetCard</strong> adalah card outlined tanpa elevation yang dirancang untuk widget/statistik.
|
|
Memiliki margin bawah otomatis (<code>mb-6</code>) dan slot <code>default</code> untuk kontennya.
|
|
</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 widget card</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 widget</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">{{ widgetCardCode }}</pre>
|
|
</UiChildCard>
|
|
|
|
<UiChildCard title="Demo">
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
<WidgetCard title="Total Pengguna">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-icon color="primary" size="36">mdi-account-group</v-icon>
|
|
<span class="text-h4 font-weight-bold">1,250</span>
|
|
</div>
|
|
<p class="text-caption text-medium-emphasis mt-1">+12% dari bulan lalu</p>
|
|
</WidgetCard>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<WidgetCard title="Total Penjualan">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-icon color="success" size="36">mdi-cash</v-icon>
|
|
<span class="text-h4 font-weight-bold">Rp 45jt</span>
|
|
</div>
|
|
<p class="text-caption text-medium-emphasis mt-1">+8% dari bulan lalu</p>
|
|
</WidgetCard>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<WidgetCard title="Total Order">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-icon color="warning" size="36">mdi-cart</v-icon>
|
|
<span class="text-h4 font-weight-bold">320</span>
|
|
</div>
|
|
<p class="text-caption text-medium-emphasis mt-1">+5% dari bulan lalu</p>
|
|
</WidgetCard>
|
|
</v-col>
|
|
</v-row>
|
|
</UiChildCard>
|
|
</UiParentCard>
|
|
</v-col>
|
|
|
|
<!-- ============================================================= -->
|
|
<!-- WidgetCardv2 -->
|
|
<!-- ============================================================= -->
|
|
<v-col cols="12">
|
|
<UiParentCard title="WidgetCardv2 — Card Widget dengan Footer">
|
|
<p class="text-body-1 mb-4">
|
|
<strong>WidgetCardv2</strong> adalah versi lanjutan dari WidgetCard dengan dukungan slot
|
|
<code>footer</code> untuk menambahkan aksi/info di bawah konten. Footer dapat
|
|
disembunyikan menggunakan prop <code>hideaction</code>.
|
|
</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 widget</td></tr>
|
|
<tr><td><code>hideaction</code></td><td>Boolean</td><td>Jika <code>true</code>, footer disembunyikan</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</td></tr>
|
|
<tr><td><code>footer</code></td><td>Konten footer (aksi/info tambahan)</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">{{ widgetCardv2Code }}</pre>
|
|
</UiChildCard>
|
|
|
|
<UiChildCard title="Demo — Dengan Footer">
|
|
<v-row>
|
|
<v-col cols="12" md="6">
|
|
<WidgetCardv2 title="Laporan Bulan Ini">
|
|
<div class="d-flex align-center ga-2 mb-2">
|
|
<v-icon color="info" size="32">mdi-chart-bar</v-icon>
|
|
<span class="text-h5 font-weight-bold">75%</span>
|
|
<span class="text-body-2 text-medium-emphasis">target tercapai</span>
|
|
</div>
|
|
<v-progress-linear model-value="75" color="info" rounded height="8" />
|
|
<template #footer>
|
|
<v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
|
|
<v-spacer />
|
|
<span class="text-caption text-medium-emphasis">Update: hari ini</span>
|
|
</template>
|
|
</WidgetCardv2>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<WidgetCardv2 title="Tanpa Footer" :hideaction="true">
|
|
<p class="text-body-2">
|
|
Prop <code>hideaction="true"</code> menyembunyikan area footer
|
|
meskipun slot footer telah diisi.
|
|
</p>
|
|
<template #footer>
|
|
<span>Footer ini tidak akan terlihat</span>
|
|
</template>
|
|
</WidgetCardv2>
|
|
</v-col>
|
|
</v-row>
|
|
</UiChildCard>
|
|
</UiParentCard>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
widgetCardCode: `<template>
|
|
<WidgetCard title="Total Pengguna">
|
|
<div class="d-flex align-center ga-2">
|
|
<v-icon color="primary" size="36">mdi-account-group</v-icon>
|
|
<span class="text-h4 font-weight-bold">1,250</span>
|
|
</div>
|
|
<p class="text-caption mt-1">+12% dari bulan lalu</p>
|
|
</WidgetCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import WidgetCard from '@/components/shared/WidgetCard.vue';
|
|
<\/script>`,
|
|
|
|
widgetCardv2Code: `<template>
|
|
<WidgetCardv2 title="Laporan Bulan Ini">
|
|
<!-- Slot default: konten utama -->
|
|
<div>Konten widget di sini...</div>
|
|
|
|
<!-- Slot footer: aksi/info di bawah -->
|
|
<template #footer>
|
|
<v-btn variant="text" color="primary" size="small">Lihat Detail</v-btn>
|
|
</template>
|
|
</WidgetCardv2>
|
|
|
|
<!-- Sembunyikan footer dengan prop hideaction -->
|
|
<WidgetCardv2 title="Tanpa Footer" :hideaction="true">
|
|
<div>Footer tidak tampil.</div>
|
|
</WidgetCardv2>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import WidgetCardv2 from '@/components/shared/WidgetCardv2.vue';
|
|
<\/script>`,
|
|
};
|
|
}
|
|
};
|
|
</script>
|