delete useless pages

2026-03-17 09:22:24 +07:00
parent f2ed1b2556
commit c2fa3c160b
51 changed files with 1649 additions and 8842 deletions
@@ -0,0 +1,142 @@
+<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>