change to folder template
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,187 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user