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

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

const breadcrumbBasic = [
    { text: 'Dashboard', disabled: false, href: '/' },
    { text: 'Shared Components', disabled: true }
];

const breadcrumbDeep = [
    { text: 'Dashboard', disabled: false, href: '/' },
    { text: 'Apps', disabled: false, href: '/apps' },
    { text: 'Pengguna', disabled: false, href: '/apps/user' },
    { text: 'Profil', disabled: true }
];
</script>

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- BaseBreadcrumb -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="BaseBreadcrumb — Header Halaman dengan Breadcrumb">
                <p class="text-body-1 mb-4">
                    <strong>BaseBreadcrumb</strong> adalah komponen header halaman yang menampilkan
                    <em>judul halaman</em> di sebelah kiri dan <em>navigasi breadcrumb</em> di sebelah kanan.
                    Setiap item breadcrumb ditampilkan sebagai chip berwarna primary. Ikon rumah (home)
                    otomatis ditambahkan di awal breadcrumb.
                </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 halaman yang ditampilkan di sebelah kiri</td>
                        </tr>
                        <tr>
                            <td><code>breadcrumbs</code></td>
                            <td>Array</td>
                            <td>
                                Array objek breadcrumb. Setiap objek: <code>{ text, disabled, href }</code>
                            </td>
                        </tr>
                    </tbody>
                </v-table>

                <UiChildCard title="Struktur Data breadcrumbs" class="mb-6">
                    <pre class="bg-grey-lighten-4 pa-4 rounded text-body-2 overflow-auto">{{ breadcrumbDataStructure }}</pre>
                </UiChildCard>

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

                <UiChildCard title="Demo — Breadcrumb 2 Level" class="mb-6">
                    <BaseBreadcrumb
                        title="Shared Components"
                        :breadcrumbs="breadcrumbBasic"
                    />
                    <p class="text-caption text-medium-emphasis mt-n2 mb-0">
                        ↑ BaseBreadcrumb di atas merupakan contoh dengan 2 level navigasi.
                    </p>
                </UiChildCard>

                <UiChildCard title="Demo — Breadcrumb 4 Level" class="mb-6">
                    <BaseBreadcrumb
                        title="Profil Pengguna"
                        :breadcrumbs="breadcrumbDeep"
                    />
                    <p class="text-caption text-medium-emphasis mt-n2 mb-0">
                        ↑ BaseBreadcrumb dengan 4 level navigasi (Dashboard → Apps → Pengguna → Profil).
                    </p>
                </UiChildCard>

                <UiChildCard title="Tips Penggunaan" class="mb-6">
                    <v-alert type="info" variant="tonal" class="mb-3">
                        <strong>Posisi terbaik:</strong> Tempatkan <code>BaseBreadcrumb</code> sebagai
                        elemen pertama di dalam <code>&lt;template&gt;</code> halaman, sebelum konten utama.
                        Biasanya diletakkan di luar <code>&lt;v-row&gt;</code> konten.
                    </v-alert>
                    <v-alert type="warning" variant="tonal">
                        Item breadcrumb terakhir sebaiknya diberi <code>disabled: true</code> untuk
                        menandakan halaman saat ini (tidak dapat diklik).
                    </v-alert>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            breadcrumbDataStructure: `// Struktur setiap item breadcrumbs:
const breadcrumbs = [
  {
    text: 'Dashboard',   // Label yang ditampilkan
    disabled: false,     // false = dapat diklik (ada href)
    href: '/'            // Target navigasi
  },
  {
    text: 'Halaman Ini',
    disabled: true       // true = tidak dapat diklik (halaman aktif)
    // href tidak diperlukan jika disabled: true
  }
]`,

            breadcrumbCode: `<template>
  <!-- Letakkan di awal halaman, sebelum konten utama -->
  <BaseBreadcrumb
    title="Judul Halaman"
    :breadcrumbs="breadcrumbs"
  />

  <!-- Konten halaman di bawahnya -->
  <v-row>
    <v-col cols="12">
      <!-- ... -->
    </v-col>
  </v-row>
</template>

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

const breadcrumbs = [
  { text: 'Dashboard', disabled: false, href: '/' },
  { text: 'Apps', disabled: false, href: '/apps' },
  { text: 'Halaman Ini', disabled: true }
];
<\/script>`,
        };
    }
};
</script>