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

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

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- AppBaseCard -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="AppBaseCard — Layout Dua Panel (Kiri & Kanan)">
                <p class="text-body-1 mb-4">
                    <strong>AppBaseCard</strong> adalah komponen layout yang membagi tampilan menjadi
                    dua panel: panel <em>kiri</em> (sidebar) dan panel <em>kanan</em> (konten utama).
                    Panel kiri hanya ditampilkan pada layar besar (<code>lgAndUp</code>).
                    Pada layar kecil, panel kiri dapat diakses melalui drawer navigasi yang dipicu tombol Menu.
                </p>

                <v-alert type="info" variant="tonal" class="mb-6">
                    Komponen ini digunakan pada aplikasi seperti <strong>Chat</strong> dan
                    <strong>Kanban</strong> yang membutuhkan layout dua panel responsif.
                </v-alert>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Slot</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>leftpart</code></td>
                            <td>Konten panel kiri (lebar tetap 320px), tampil di layar besar saja</td>
                        </tr>
                        <tr>
                            <td><code>rightpart</code></td>
                            <td>Konten panel kanan (mengisi sisa lebar)</td>
                        </tr>
                        <tr>
                            <td><code>mobileLeftContent</code></td>
                            <td>Konten dalam drawer navigasi untuk tampilan mobile</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">{{ appBaseCardCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo Sederhana" class="mb-6">
                    <AppBaseCard>
                        <template #leftpart>
                            <div class="pa-4">
                                <p class="text-subtitle-1 font-weight-bold mb-3">Panel Kiri (Sidebar)</p>
                                <v-list density="compact">
                                    <v-list-item
                                        v-for="item in ['Item 1', 'Item 2', 'Item 3']"
                                        :key="item"
                                        :title="item"
                                        prepend-icon="mdi-circle-small"
                                    />
                                </v-list>
                            </div>
                        </template>
                        <template #rightpart>
                            <div class="pa-4">
                                <p class="text-subtitle-1 font-weight-bold mb-3">Panel Kanan (Konten Utama)</p>
                                <p class="text-body-2 text-medium-emphasis">
                                    Ini adalah area konten utama. Pada layar kecil, panel kiri akan
                                    disembunyikan dan dapat dibuka melalui tombol "Menu" yang muncul di atas.
                                </p>
                                <v-alert type="success" variant="tonal" class="mt-3">
                                    Coba perkecil browser untuk melihat perilaku responsif!
                                </v-alert>
                            </div>
                        </template>
                        <template #mobileLeftContent>
                            <div class="pa-4">
                                <p class="text-subtitle-1 font-weight-bold mb-3">Menu Mobile</p>
                                <v-list density="compact">
                                    <v-list-item
                                        v-for="item in ['Item 1', 'Item 2', 'Item 3']"
                                        :key="item"
                                        :title="item"
                                        prepend-icon="mdi-circle-small"
                                    />
                                </v-list>
                            </div>
                        </template>
                    </AppBaseCard>
                </UiChildCard>

                <UiChildCard title="Tips Penggunaan" class="mb-6">
                    <v-list lines="two">
                        <v-list-item
                            prepend-icon="mdi-cellphone"
                            title="Responsif otomatis"
                            subtitle="Panel kiri hilang di layar kecil dan muncul sebagai drawer nav ketika tombol Menu diklik."
                        />
                        <v-list-item
                            prepend-icon="mdi-resize"
                            title="Lebar panel kiri tetap"
                            subtitle="Panel kiri memiliki lebar 320px yang tidak bisa diubah. Sesuaikan konten Anda dengan lebar ini."
                        />
                        <v-list-item
                            prepend-icon="mdi-content-copy"
                            title="Duplikasi konten mobile"
                            subtitle="Slot mobileLeftContent harus memuat konten yang sama dengan leftpart agar konsisten di semua ukuran layar."
                        />
                    </v-list>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            appBaseCardCode: `<template>
  <AppBaseCard>
    <!-- Panel kiri: daftar kontak, list, dsb. -->
    <template #leftpart>
      <div class="pa-4">
        <v-list>
          <v-list-item
            v-for="contact in contacts"
            :key="contact.id"
            :title="contact.name"
            @click="selectContact(contact)"
          />
        </v-list>
      </div>
    </template>

    <!-- Panel kanan: detail/percakapan/konten utama -->
    <template #rightpart>
      <div class="pa-4">
        <h5>Detail Kontak</h5>
        <p>{{ selectedContact?.name }}</p>
      </div>
    </template>

    <!-- Konten drawer untuk mobile (sama dengan leftpart) -->
    <template #mobileLeftContent>
      <div class="pa-4">
        <v-list>
          <v-list-item
            v-for="contact in contacts"
            :key="contact.id"
            :title="contact.name"
            @click="selectContact(contact)"
          />
        </v-list>
      </div>
    </template>
  </AppBaseCard>
</template>

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