general-template/pages/shared-components/UiParentCard.vue

<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
</script>

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- UiParentCard -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="UiParentCard — Elevated Card dengan Title">
                <p class="text-body-1 mb-4">
                    <strong>UiParentCard</strong> adalah card dengan <code>elevation="10"</code> yang biasanya digunakan sebagai
                    <em>wrapper utama</em> pada halaman. Mendukung slot <code>default</code> (konten) dan slot
                    <code>action</code> (tombol/aksi di kanan atas header).
                </p>

                <!-- Props Table -->
                <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 yang ditampilkan di header card</td></tr>
                    </tbody>
                </v-table>

                <!-- Slots 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 di dalam card</td></tr>
                        <tr><td><code>action</code></td><td>Konten aksi di kanan atas (misal: tombol)</td></tr>
                    </tbody>
                </v-table>

                <!-- Code Example -->
                <UiChildCard title="Contoh Penggunaan" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiParentCardCode }}</pre>
                </UiChildCard>

                <!-- Live Demo -->
                <UiChildCard title="Demo">
                    <UiParentCard title="Judul Card Saya">
                        <template #action>
                            <v-btn color="primary" size="small">Aksi</v-btn>
                        </template>
                        <p class="text-body-2">Ini adalah konten di dalam UiParentCard. Gunakan slot <strong>default</strong> untuk mengisi konten.</p>
                    </UiParentCard>
                </UiChildCard>
            </UiParentCard>
        </v-col>

        <!-- ============================================================= -->
        <!-- UiChildCard -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="UiChildCard — Outlined Card dengan Title">
                <p class="text-body-1 mb-4">
                    <strong>UiChildCard</strong> adalah card ber-outline (tanpa elevation) yang biasanya digunakan
                    <em>di dalam</em> UiParentCard untuk memisahkan bagian-bagian konten.
                </p>

                <!-- Props Table -->
                <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 section di dalam card</td></tr>
                    </tbody>
                </v-table>

                <!-- Code Example -->
                <UiChildCard title="Contoh Penggunaan" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ uiChildCardCode }}</pre>
                </UiChildCard>

                <!-- Live Demo -->
                <UiChildCard title="Demo">
                    <v-row>
                        <v-col cols="12" md="6">
                            <UiChildCard title="Section A">
                                <p class="text-body-2">Konten section A.</p>
                            </UiChildCard>
                        </v-col>
                        <v-col cols="12" md="6">
                            <UiChildCard title="Section B">
                                <p class="text-body-2">Konten section B.</p>
                            </UiChildCard>
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            uiParentCardCode: `<template>
  <UiParentCard title="Judul Card Saya">
    <!-- Slot action: tombol/aksi di kanan atas -->
    <template #action>
      <v-btn color="primary" size="small">Aksi</v-btn>
    </template>

    <!-- Slot default: konten utama -->
    <p>Konten di sini...</p>
  </UiParentCard>
</template>

<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
<\/script>`,

            uiChildCardCode: `<template>
  <!-- Biasanya dipakai di dalam UiParentCard -->
  <UiParentCard title="Halaman Saya">
    <v-row>
      <v-col cols="12" md="6">
        <UiChildCard title="Section A">
          <p>Konten section A</p>
        </UiChildCard>
      </v-col>
      <v-col cols="12" md="6">
        <UiChildCard title="Section B">
          <p>Konten section B</p>
        </UiChildCard>
      </v-col>
    </v-row>
  </UiParentCard>
</template>

<script setup lang="ts">
import UiParentCard from '@/components/shared/UiParentCard.vue';
import UiChildCard from '@/components/shared/UiChildCard.vue';
<\/script>`,
        };
    }
};
</script>