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

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

const searchText = '';
</script>

<template>
    <v-row>
        <!-- ============================================================= -->
        <!-- UiTextfieldPrimary -->
        <!-- ============================================================= -->
        <v-col cols="12">
            <UiParentCard title="UiTextfieldPrimary — Text Field Bercorak Primary">
                <p class="text-body-1 mb-4">
                    <strong>UiTextfieldPrimary</strong> adalah wrapper tipis di atas <code>v-text-field</code>
                    Vuetify yang secara otomatis menerapkan <code>color="primary"</code>.
                    Gunakan <code>v-model</code> dan atribut lainnya langsung seperti pada
                    <code>v-text-field</code> biasa, dan manfaatkan slot default untuk label/ikon khusus.
                </p>

                <v-alert type="info" variant="tonal" class="mb-6">
                    Komponen ini menggunakan <strong>slot default</strong> (bukan prop <code>label</code>)
                    untuk menyisipkan konten. Untuk label teks biasa, cukup tulis teks di dalam tag.
                    Untuk atribut seperti <code>v-model</code>, <code>placeholder</code>,
                    <code>variant</code>, dan lainnya, gunakan langsung pada tag
                    <code>&lt;UiTextfieldPrimary&gt;</code>.
                </v-alert>

                <v-table density="compact" class="mb-6">
                    <thead>
                        <tr><th>Prop/Atribut</th><th>Keterangan</th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>v-model</code></td>
                            <td>Binding dua arah untuk nilai input</td>
                        </tr>
                        <tr>
                            <td><code>label</code>, <code>placeholder</code></td>
                            <td>Diteruskan langsung ke <code>v-text-field</code></td>
                        </tr>
                        <tr>
                            <td><code>variant</code></td>
                            <td>Gaya tampilan: <code>outlined</code>, <code>filled</code>, <code>underlined</code>, dll.</td>
                        </tr>
                        <tr>
                            <td><code>density</code></td>
                            <td><code>default</code>, <code>comfortable</code>, <code>compact</code></td>
                        </tr>
                        <tr>
                            <td><code>prepend-inner-icon</code>, <code>append-inner-icon</code></td>
                            <td>Ikon di dalam field</td>
                        </tr>
                        <tr>
                            <td>Slot <code>default</code></td>
                            <td>Konten/label tambahan yang disisipkan ke dalam field</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">{{ textfieldCode }}</pre>
                </UiChildCard>

                <UiChildCard title="Demo — Berbagai Varian" class="mb-6">
                    <v-row>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2">Outlined (default Vuetify)</p>
                            <UiTextfieldPrimary
                                label="Nama Lengkap"
                                variant="outlined"
                                placeholder="Masukkan nama..."
                            />
                        </v-col>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2">Filled</p>
                            <UiTextfieldPrimary
                                label="Email"
                                variant="filled"
                                placeholder="contoh@email.com"
                            />
                        </v-col>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2">Underlined</p>
                            <UiTextfieldPrimary
                                label="Kata Sandi"
                                type="password"
                                variant="underlined"
                            />
                        </v-col>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2">Dengan Ikon & Density Compact</p>
                            <UiTextfieldPrimary
                                label="Cari..."
                                variant="outlined"
                                density="compact"
                                prepend-inner-icon="mdi-magnify"
                            />
                        </v-col>
                    </v-row>
                </UiChildCard>

                <UiChildCard title="Perbandingan: UiTextfieldPrimary vs v-text-field biasa" class="mb-6">
                    <v-row>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2 text-primary">UiTextfieldPrimary (warna primary otomatis)</p>
                            <UiTextfieldPrimary
                                label="Field Primary"
                                variant="outlined"
                            />
                        </v-col>
                        <v-col cols="12" md="6">
                            <p class="text-subtitle-2 mb-2">v-text-field biasa (tanpa warna)</p>
                            <v-text-field
                                label="Field Biasa"
                                variant="outlined"
                            />
                        </v-col>
                    </v-row>
                </UiChildCard>
            </UiParentCard>
        </v-col>
    </v-row>
</template>

<script lang="ts">
export default {
    data() {
        return {
            textfieldCode: `<template>
  <!-- Penggunaan dasar -->
  <UiTextfieldPrimary
    v-model="email"
    label="Email"
    variant="outlined"
    placeholder="contoh@email.com"
  />

  <!-- Dengan ikon -->
  <UiTextfieldPrimary
    v-model="search"
    label="Cari..."
    variant="outlined"
    density="compact"
    prepend-inner-icon="mdi-magnify"
  />

  <!-- Dengan type password -->
  <UiTextfieldPrimary
    v-model="password"
    label="Kata Sandi"
    type="password"
    variant="outlined"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UiTextfieldPrimary from '@/components/shared/UiTextfieldPrimary.vue';

const email = ref('');
const search = ref('');
const password = ref('');
<\/script>`,
        };
    }
};
</script>