@dtd-ui/vue

@dtd-ui/vue

Pustaka komponen antarmuka pengguna (UI Component Library) resmi DTD Design System berbasis Vue 3 dan Tailwind CSS v4 untuk ekosistem aplikasi web Direktorat Transformasi Digital (DTD) Universitas Indonesia. Menyediakan rangkaian komponen formulir, tabel data interaktif, navigasi, serta modul dialog dan notifikasi dengan identitas visual kuning Makara yang konsisten.

Daftar Isi

• Fitur Utama
• Instalasi & Dependensi
• Mulai Cepat (Quickstart)
  • Penggunaan Langsung (Per Komponen)
  • Registrasi Global
• Kategori 1: Komponen UI & Formulir (ui/)
  • 1. BaseButton
  • 2. BaseCheckbox
  • 3. BaseInput
  • 4. BaseInputDate
  • 5. BaseInputDateRangePicker
  • 6. BaseSelect
  • 7. BaseSelectMultiple
  • 8. BaseBreadcrumb
  • 9. BaseDataTable
• Kategori 2: Komponen Popup & Feedback (popup/)
  • 10. BaseDialog
  • 11. BaseConfirmDialog
  • 12. BaseLoadingDialog
  • 13. BaseToast
• Referensi Tipe & Antarmuka TypeScript
• Kustomisasi Tema & Variabel CSS
• Pengembangan & Build
• Lisensi

Fitur Utama

• 13 Komponen Produksi Siap Pakai:
  • 9 Komponen UI & Formulir (ui/): BaseButton, BaseCheckbox, BaseInput, BaseInputDate, BaseInputDateRangePicker, BaseSelect, BaseSelectMultiple, BaseBreadcrumb, BaseDataTable.
  • 4 Komponen Popup & Feedback (popup/): BaseDialog, BaseConfirmDialog, BaseLoadingDialog, BaseToast.
• Injeksi Gaya Otomatis (Zero CSS Import): Seluruh stylesheet Tailwind CSS dan variabel tema telah di-bundle dan di-inject secara otomatis melalui JavaScript (vite-plugin-css-injected-by-js).
• Dukungan TypeScript Kelas Satu: Dilengkapi definisi tipe .d.ts penuh, generics pada komponen tabel (BaseDataTable<T>), serta dokumentasi JSDoc berbahasa Indonesia untuk autocomplete di IDE.
• Responsif & Ramah Aksesibilitas: Tabel data otomatis bertransformasi menjadi tampilan kartu (card list) pada layar perangkat seluler (< 640px), serta popup dan dropdown dirender menggunakan <Teleport to="body"> untuk mencegah masalah pemotongan kontainer (overflow: hidden).
• Kustomisasi Mudah via CSS Variables: Seluruh skema warna, border, bayangan fokus, dan radius sudut dapat disesuaikan secara dinamis melalui variabel :root.
• Dual Module Format: Mendukung sistem modul modern ESM (dtd-ui-vue.es.js) dan UMD (dtd-ui-vue.umd.js).

Instalasi & Dependensi

Instal paket @dtd-ui/vue beserta peer dependency yang dibutuhkan di proyek Vue 3 Anda:

npm install @dtd-ui/vue

Peer Dependencies & Dependensi Ikon

Paket ini membutuhkan vue versi ^3.0.0 dan menggunakan @iconify/vue untuk merender ikon pada tombol, tabel, serta dialog:

npm install vue@^3.0.0 @iconify/vue@^5.0.3

Mulai Cepat (Quickstart)

[!TIP] Anda tidak perlu mengimpor file CSS secara terpisah karena @dtd-ui/vue otomatis menyuntikkan gaya komponen ke dalam <head> saat komponen diimpor.

1. Penggunaan Langsung (Per Komponen)

Impor komponen dan tipe yang Anda perlukan langsung dari @dtd-ui/vue:

<script setup lang="ts">
import { ref } from 'vue'
import {
  BaseButton,
  BaseInput,
  BaseSelect,
  BaseConfirmDialog,
  BaseToast,
  type SelectOption,
} from '@dtd-ui/vue'

const nama = ref('')
const prodi = ref<string | null>(null)
const showConfirm = ref(false)
const showToast = ref(false)

const prodiOptions: SelectOption<string>[] = [
  { label: 'Ilmu Komputer', value: 'ik' },
  { label: 'Sistem Informasi', value: 'si' },
  { label: 'Teknik Komputer', value: 'tk' },
]

function handleSave() {
  showConfirm.value = false
  showToast.value = true
}
</script>

<template>
  <div class="p-6 max-w-md space-y-4">
    <BaseInput
      v-model="nama"
      label="Nama Lengkap"
      placeholder="Masukkan nama mahasiswa..."
      required
    />

    <BaseSelect
      v-model="prodi"
      :options="prodiOptions"
      label="Program Studi"
      placeholder="Pilih program studi..."
      searchable
      required
    />

    <BaseButton variant="primary" icon="lucide:save" @click="showConfirm = true">
      Simpan Data
    </BaseButton>

    <BaseConfirmDialog
      v-model="showConfirm"
      type="info"
      title="Konfirmasi Penyimpanan"
      message="Apakah Anda yakin data yang dimasukkan sudah benar?"
      confirm-label="Ya, Simpan"
      cancel-label="Periksa Kembali"
      @confirm="handleSave"
    />

    <BaseToast
      v-model="showToast"
      type="success"
      title="Berhasil Disimpan"
      message="Data mahasiswa telah berhasil diperbarui ke dalam sistem."
      :duration="3000"
    />
  </div>
</template>

2. Registrasi Global

Jika Anda ingin mendaftarkan seluruh atau sebagian komponen secara global pada file entri aplikasi (main.ts):

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import {
  BaseButton,
  BaseCheckbox,
  BaseInput,
  BaseInputDate,
  BaseInputDateRangePicker,
  BaseSelect,
  BaseSelectMultiple,
  BaseBreadcrumb,
  BaseDataTable,
  BaseDialog,
  BaseConfirmDialog,
  BaseLoadingDialog,
  BaseToast,
} from '@dtd-ui/vue'

const app = createApp(App)

const components = {
  BaseButton,
  BaseCheckbox,
  BaseInput,
  BaseInputDate,
  BaseInputDateRangePicker,
  BaseSelect,
  BaseSelectMultiple,
  BaseBreadcrumb,
  BaseDataTable,
  BaseDialog,
  BaseConfirmDialog,
  BaseLoadingDialog,
  BaseToast,
}

Object.entries(components).forEach(([name, component]) => {
  app.component(name, component)
})

app.mount('#app')

Kategori 1: Komponen UI & Formulir (ui/)

1. BaseButton

Komponen tombol aksi interaktif dengan dukungan berbagai varian warna, tiga ukuran standar, penempatan ikon di sisi kiri/kanan (menggunakan @iconify/vue), mode khusus ikon (icon-only), serta indikator pemuatan (loading spinner).

Props

Events / Emits

Komponen ini meneruskan event DOM standar secara langsung pada elemen <button> root (seperti @click). Tidak ada custom emit khusus yang didefinisikan di dalam komponen.

Slots & Metode Terekspos

• Slots:
  • default: Konten atau label teks tombol (disembunyikan secara otomatis apabila iconOnly bernilai true).
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseButton } from '@dtd-ui/vue'

const isSaving = ref(false)
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <!-- Varian Utama & Sekunder (Kuning DTD) -->
    <BaseButton variant="primary" icon="lucide:check">Simpan</BaseButton>
    <BaseButton variant="secondary">Aksi Standar</BaseButton>

    <!-- Varian Status & Ghost -->
    <BaseButton variant="success" icon="lucide:refresh-cw">Sinkronisasi</BaseButton>
    <BaseButton variant="danger" icon="lucide:trash-2">Hapus</BaseButton>
    <BaseButton variant="warning">Peringatan</BaseButton>
    <BaseButton variant="info" icon-right="lucide:arrow-right">Detail</BaseButton>
    <BaseButton variant="ghost">Batal</BaseButton>

    <!-- Mode Loading & Icon Only -->
    <BaseButton variant="primary" :loading="isSaving">Memproses...</BaseButton>
    <BaseButton variant="ghost" icon="lucide:settings" icon-only size="md" />
  </div>
</template>

2. BaseCheckbox

Komponen input kotak centang (checkbox) kustom yang mendukung pengikatan dua arah (v-model), status parsial (indeterminate), penanda wajib/opsional, serta tampilan pesan kesalahan (error).

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada (menggunakan prop label).
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckbox } from '@dtd-ui/vue'

const setujuSyarat = ref(false)
const pilihSebagian = ref(false)
</script>

<template>
  <div class="space-y-3">
    <BaseCheckbox
      v-model="setujuSyarat"
      label="Saya menyetujui seluruh syarat dan ketentuan pendaftaran"
      required
      :error="!setujuSyarat ? 'Persetujuan wajib dicentang' : undefined"
    />

    <BaseCheckbox
      v-model="pilihSebagian"
      label="Pilih Semua Peserta"
      :indeterminate="true"
    />
  </div>
</template>

3. BaseInput

Komponen input teks serbaguna yang mendukung tipe text, password (dilengkapi tombol toggle lihat/sembunyikan kata sandi), email, number (konversi otomatis ke tipe Number), dan tel (sanitasi otomatis karakter telepon hanya ke 0-9, +, -, (, ), dan spasi), serta penyisipan ikon HTML/SVG di sisi kiri (prefix) maupun kanan (suffix).

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInput } from '@dtd-ui/vue'

const email = ref('')
const password = ref('')
const telepon = ref('')
const searchSvg = `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`
</script>

<template>
  <div class="space-y-4">
    <BaseInput
      v-model="email"
      type="email"
      label="Alamat Email"
      placeholder="nama@ui.ac.id"
      :prefix-icon="searchSvg"
      required
    />

    <BaseInput
      v-model="password"
      type="password"
      label="Kata Sandi"
      placeholder="Masukkan kata sandi..."
      required
    />

    <BaseInput
      v-model="telepon"
      type="tel"
      label="Nomor Telepon"
      placeholder="+62 812-xxxx-xxxx"
      optional
    />
  </div>
</template>

4. BaseInputDate

Komponen pemilih tanggal tunggal (single date picker) interaktif dengan popover kalender yang memiliki navigasi bertingkat beranimasi (Hari -> Bulan -> Dekade 10 Tahun), batas tanggal minimum/maksimum (min/max), dan tombol hapus pilihan.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInputDate } from '@dtd-ui/vue'

const tanggalUjian = ref('2026-05-10')
</script>

<template>
  <BaseInputDate
    v-model="tanggalUjian"
    label="Tanggal Pelaksanaan Ujian"
    placeholder="Pilih tanggal ujian"
    format="yyyy-MM-dd"
    min="2026-01-01"
    max="2026-12-31"
    required
  />
</template>

5. BaseInputDateRangePicker

Komponen pemilih rentang tanggal (date range picker) dengan tampilan dua panel kalender berdampingan (dual-month), pratinjau sorotan rentang saat kursor diarahkan (hover preview), pengurutan tanggal awal dan akhir secara otomatis, serta penutupan popover otomatis setelah tanggal kedua dipilih.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseInputDateRangePicker, type DateRangeValue } from '@dtd-ui/vue'

const periodePendaftaran = ref<DateRangeValue>({
  start: '01/06/2026',
  end: '15/06/2026',
})
</script>

<template>
  <BaseInputDateRangePicker
    v-model="periodePendaftaran"
    label="Periode Pendaftaran"
    format="dd/MM/yyyy"
    required
  />
</template>

6. BaseSelect

Komponen dropdown pilihan tunggal (single select) dengan fitur pencarian opsi secara langsung (searchable), indikator status loading, dukungan opsi nonaktif (disabled option), menu dropdown yang di-<Teleport to="body">, serta metode validasi internal yang terekspos.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods (defineExpose):
  • validate(): boolean: Memicu validasi wajib isi (required) secara manual dari komponen induk (via template ref). Mengembalikan true jika valid dan false jika kosong namun wajib diisi.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect, type SelectOption } from '@dtd-ui/vue'

const lokasiUjian = ref<string | null>(null)
const selectRef = ref<InstanceType<typeof BaseSelect> | null>(null)

const daftarLokasi: SelectOption<string>[] = [
  { label: 'Kampus UI Depok', value: 'depok' },
  { label: 'Kampus UI Salemba', value: 'salemba' },
  { label: 'Gedung Laboratorium (Penuh)', value: 'lab', disabled: true },
]

function submitForm() {
  if (!selectRef.value?.validate()) return
  // Lanjutkan proses submit
}
</script>

<template>
  <div class="space-y-3">
    <BaseSelect
      ref="selectRef"
      v-model="lokasiUjian"
      :options="daftarLokasi"
      label="Lokasi Ujian"
      placeholder="Pilih lokasi kampus..."
      searchable
      required
    />
  </div>
</template>

7. BaseSelectMultiple

Komponen dropdown multi-pilihan (multi-select) yang menampilkan item terpilih sebagai chip ringkas di dalam trigger, dilengkapi badge penghitung kelebihan chip (+N dengan tooltip), fitur "Pilih Semua" (mendukung status indeterminate sesuai hasil filter pencarian), serta opsi menampilkan daftar lengkap item terpilih di bawah komponen.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods (defineExpose):
  • validate(): boolean: Memvalidasi apakah setidaknya satu item telah dipilih ketika required bernilai true. Mengembalikan true jika valid dan false jika gagal.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelectMultiple, type SelectOption } from '@dtd-ui/vue'

const selectedRooms = ref<string[]>(['r101', 'r102'])

const roomOptions: SelectOption<string>[] = [
  { label: 'Ruang 101 - Gedung A', value: 'r101' },
  { label: 'Ruang 102 - Gedung A', value: 'r102' },
  { label: 'Ruang 201 - Gedung B', value: 'r201' },
  { label: 'Lab Komputer 1', value: 'lab1' },
]
</script>

<template>
  <BaseSelectMultiple
    v-model="selectedRooms"
    :options="roomOptions"
    label="Ruang Ujian"
    placeholder="Cari dan pilih ruangan..."
    searchable
    required
    :max-visible-chips="2"
    show-selected-list
    :selected-list-removable="true"
  />
</template>

8. BaseBreadcrumb

Komponen navigasi jejak halaman (breadcrumb) dengan pemisah ikon panah kanan (chevron) dan penanganan klik navigasi pada setiap item sebelum halaman aktif terakhir.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { BaseBreadcrumb, type BreadcrumbItem } from '@dtd-ui/vue'

const crumbs: BreadcrumbItem[] = [
  { label: 'Beranda', route: '/' },
  { label: 'Manajemen Pengawas', route: '/pengawas' },
  { label: 'Detail Penugasan' },
]

function onNavigate(item: BreadcrumbItem) {
  if (item.route) {
    console.log('Navigasi menuju:', item.route)
  }
}
</script>

<template>
  <BaseBreadcrumb :items="crumbs" @navigate="onNavigate" />
</template>

9. BaseDataTable

Komponen tabel data generik (generic="T extends Record<string, any>") yang kaya fitur: mendukung pencarian instan multi-kolom, paginasi dengan pemilih ukuran halaman (10, 25, 50, 100), penomoran baris otomatis, seleksi baris dengan checkbox (multi-row selection), kolom aksi bawaan (view, edit, delete) lengkap dengan modal dialog konfirmasi terintegrasi, skeleton loading, serta tata letak responsif yang otomatis berubah menjadi daftar kartu (card list) pada layar mobile.

Props

Events / Emits

Slots & Metode Terekspos

• Slots:
  • #toolbar-actions: Slot di sisi kanan atas toolbar (sejajar dengan kolom pencarian) untuk menempatkan tombol aksi tambahan seperti tombol "Tambah Data" atau "Ekspor".
  • #cell-<key>="{ row, value, isMobileCard }": Slot kustomisasi tampilan sel untuk kolom dengan key tertentu. Menerima slot props:
    • row: T — Objek data baris penuh.
    • value: string — Nilai teks hasil pemformatan bawaan atau formatter.
    • isMobileCard: boolean — Bernilai true jika sel sedang dirender di dalam tampilan kartu mobile (< 640px), atau false jika di dalam tabel desktop.
  • #footer-left="{ rangeText, total, currentPage, totalPages, pageSize }": Slot untuk mengganti teks informasi rentang halaman pada footer tampilan mobile.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import {
  BaseDataTable,
  BaseButton,
  type DataTableColumn,
  type DataTableActions,
} from '@dtd-ui/vue'

interface Panitia {
  id: number
  nama: string
  nip: string
  unit: { nama: string }
  aktif: boolean
}

const daftarPanitia = ref<Panitia[]>([
  { id: 1, nama: 'Budi Santoso', nip: '198801012015041001', unit: { nama: 'Fasilkom' }, aktif: true },
  { id: 2, nama: 'Siti Rahma', nip: '199203122019032005', unit: { nama: 'FT' }, aktif: false },
])

const barisTerpilih = ref<Panitia[]>([])

const columns: DataTableColumn<Panitia>[] = [
  { key: 'nama', label: 'Nama Panitia', field: 'nama' },
  { key: 'nip', label: 'NIP', field: 'nip', hideOnMobile: true },
  { key: 'unit', label: 'Unit Kerja', field: 'unit.nama', align: 'center' },
  { key: 'status', label: 'Status', align: 'center' },
]

const actions: DataTableActions<Panitia> = {
  view: { confirm: false, label: 'Lihat Detail' },
  edit: { confirm: false },
  delete: {
    confirmTitle: 'Hapus Panitia?',
    confirmMessage: (row) => `Apakah Anda yakin ingin menghapus "${row.nama}"?`,
    confirmLabel: 'Ya, Hapus',
  },
}
</script>

<template>
  <BaseDataTable
    v-model:selected-rows="barisTerpilih"
    :columns="columns"
    :data="daftarPanitia"
    row-key="id"
    searchable
    search-placeholder="Cari nama atau NIP..."
    :search-fields="['nama', 'nip', 'unit.nama']"
    paginated
    :page-size="10"
    show-row-number
    selectable
    :row-selectable="(row) => row.aktif"
    :actions="actions"
    entity-label="panitia terdaftar"
    @view="(row) => console.log('Lihat:', row)"
    @edit="(row) => console.log('Edit:', row)"
    @delete="(row) => console.log('Hapus:', row)"
  >
    <template #toolbar-actions>
      <BaseButton variant="primary" icon="lucide:plus" size="sm">
        Tambah Panitia
      </BaseButton>
    </template>

    <template #cell-status="{ row }">
      <span
        class="px-2 py-0.5 rounded-full text-xs font-medium"
        :class="row.aktif ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-600'"
      >
        {{ row.aktif ? 'Aktif' : 'Nonaktif' }}
      </span>
    </template>
  </BaseDataTable>
</template>

Kategori 2: Komponen Popup & Feedback (popup/)

10. BaseDialog

Komponen modal dialog serbaguna untuk menampilkan informasi (info), keberhasilan (success), peringatan (warning), atau kesalahan (error). Mendukung dua mode tata letak: center (ikon besar di tengah untuk notifikasi/alert) dan left (header rata kiri dengan subjudul, tombol tutup X, dan slot isi kustom).

Props

Events / Emits

Slots & Metode Terekspos

• Slots:
  • default: Konten kustom di bagian badan (body) dialog. Pada layout="left", apabila slot default diisi maka prop message akan digantikan oleh isi slot. Pada layout="center", slot default memiliki fallback ke <p class="dialog-message">{{ message }}</p>.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseDialog, BaseButton } from '@dtd-ui/vue'

const showSuccess = ref(false)
const showDetail = ref(false)
</script>

<template>
  <div class="flex gap-3">
    <BaseButton variant="success" @click="showSuccess = true">Dialog Sukses</BaseButton>
    <BaseButton variant="info" @click="showDetail = true">Dialog Detail (Left)</BaseButton>

    <!-- Layout Center (Default) -->
    <BaseDialog
      v-model="showSuccess"
      type="success"
      title="Data Berhasil Dikirim"
      message="Seluruh berkas pendaftaran telah diterima oleh sistem."
      hide-cancel-button
      confirm-label="Mengerti"
      @confirm="showSuccess = false"
    />

    <!-- Layout Left dengan Slot Kustom -->
    <BaseDialog
      v-model="showDetail"
      type="info"
      layout="left"
      icon="lucide:calendar-clock"
      title="Jadwal Sesi Ujian"
      subtitle="Gedung Rumpun Ilmu Kesehatan"
      confirm-label="Tutup"
      hide-cancel-button
      @confirm="showDetail = false"
    >
      <div class="text-sm text-slate-600 space-y-1">
        <p><strong>Sesi:</strong> Sesi 1 (Pagi)</p>
        <p><strong>Waktu:</strong> 08.00 - 10.30 WIB</p>
      </div>
    </BaseDialog>
  </div>
</template>

11. BaseConfirmDialog

Komponen modal dialog khusus untuk meminta konfirmasi pengguna sebelum menjalankan tindakan krusial (seperti menghapus data atau mengirim formulir). Dirancang untuk proses asinkron: tombol konfirmasi tidak langsung menutup dialog secara otomatis, melainkan membiarkan komponen induk mengontrol status :loading="true" hingga proses selesai.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseConfirmDialog, BaseButton } from '@dtd-ui/vue'

const showDeleteDialog = ref(false)
const isDeleting = ref(false)

async function handleDelete() {
  isDeleting.value = true
  await new Promise((resolve) => setTimeout(resolve, 1500))
  isDeleting.value = false
  showDeleteDialog.value = false
}
</script>

<template>
  <BaseButton variant="danger" icon="lucide:trash-2" @click="showDeleteDialog = true">
    Hapus Data
  </BaseButton>

  <BaseConfirmDialog
    v-model="showDeleteDialog"
    type="danger"
    title="Hapus Data Peserta?"
    message="Data yang sudah dihapus tidak dapat dikembalikan lagi."
    confirm-label="Ya, Hapus Sekarang"
    cancel-label="Batal"
    :loading="isDeleting"
    :disable-outside-click="isDeleting"
    @confirm="handleDelete"
  />
</template>

12. BaseLoadingDialog

Komponen modal dialog pemrosesan (blocking overlay) dengan animasi circular spinner, ikon opsional di tengah spinner, indeterminate progress bar, serta tombol pembatalan opsional untuk proses yang dapat dihentikan pengguna.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseLoadingDialog, BaseButton } from '@dtd-ui/vue'

const isUploading = ref(false)
</script>

<template>
  <BaseButton variant="primary" @click="isUploading = true">
    Unggah Dokumen
  </BaseButton>

  <BaseLoadingDialog
    v-model="isUploading"
    variant="primary"
    icon="lucide:upload-cloud"
    title="Mengunggah Berkas..."
    message="Mohon jangan tutup halaman ini selama proses unggah berlangsung."
    cancellable
    cancel-label="Batalkan Unggahan"
    @cancel="isUploading = false"
  />
</template>

13. BaseToast

Komponen notifikasi melayang (toast notification) yang muncul di sudut kanan atas layar (top: 24px; right: 24px) dengan efek glassmorphism, bilah progres hitung mundur (countdown shimmer bar), dan penutupan otomatis sesuai durasi yang ditentukan.

Props

Events / Emits

Slots & Metode Terekspos

• Slots: Tidak ada.
• Exposed Methods: Tidak ada.

Contoh Penggunaan

<script setup lang="ts">
import { ref } from 'vue'
import { BaseToast, BaseButton } from '@dtd-ui/vue'

const showToast = ref(false)
</script>

<template>
  <BaseButton variant="success" @click="showToast = true">
    Tampilkan Notifikasi
  </BaseButton>

  <BaseToast
    v-model="showToast"
    type="success"
    title="Sinkronisasi Berhasil"
    message="Sebanyak 250 data peserta telah berhasil disinkronkan."
    :duration="4000"
  />
</template>

Referensi Tipe & Antarmuka TypeScript

Seluruh tipe dan antarmuka (interfaces) berikut diekspor langsung dari entry utama @dtd-ui/vue:

import type {
  // UI & Form
  DateRangeValue,
  SelectOption,
  JalurOption,
  BreadcrumbItem,
  DataTableColumn,
  DataTableActions,
  DataTableActionConfig,
  DataTableActionType,
  // Popup & Feedback
  DialogType,
  ConfirmVariant,
  ConfirmType,
  SpinnerVariant,
  ToastType,
} from '@dtd-ui/vue'

DateRangeValue

Digunakan pada BaseInputDateRangePicker untuk merepresentasikan rentang tanggal awal dan akhir:

export interface DateRangeValue {
  start: string | null
  end: string | null
}

SelectOption & JalurOption

Digunakan pada BaseSelect dan BaseSelectMultiple:

export interface SelectOption<T = string | number> {
  label: string
  value: T
  disabled?: boolean

}

export type JalurOption = SelectOption<string>

BreadcrumbItem

Digunakan pada BaseBreadcrumb:

export interface BreadcrumbItem {
  /** Label teks untuk rekam jejak halaman */
  label: string
  /** Rute atau URL tujuan (opsional) */
  route?: string
  /** Data kustom tambahan */

}

DataTableColumn

Digunakan untuk mendefinisikan struktur kolom pada BaseDataTable:

export interface DataTableColumn<T = Record<string, any>> {
  /** Unique key kolom, dipakai untuk slot #cell-<key> dan :key di v-for */
  key: string
  /** Label header */
  label: string
  /** Dot-path field dari row, mis. "jabatan.mjp_nm_jabatan". Opsional jika pakai formatter/slot saja. */
  field?: string
  /** Formatter custom, dipanggil dengan row penuh */
  formatter?: (row: T) => string
  /** Lebar kolom (opsional), mis. "120px" atau "20%" */
  width?: string
  /** Perataan konten */
  align?: 'left' | 'center' | 'right'
  /** Sembunyikan kolom di breakpoint mobile (<640px) */
  hideOnMobile?: boolean
}

DataTableActions, DataTableActionConfig & DataTableActionType

Digunakan untuk mengonfigurasi aksi baris (view, edit, delete) pada BaseDataTable:

export type DataTableActionType = 'view' | 'edit' | 'delete'

export interface DataTableActionConfig<T = Record<string, any>> {
  /** Tampilkan tombol aksi ini. Default: true selama key-nya didefinisikan di prop `actions`. */
  show?: boolean
  /** Label aksesibilitas (aria-label/title) untuk tombolnya */
  label?: string
  /** Tampilkan dialog konfirmasi sebelum event di-emit ke parent. Default: true */
  confirm?: boolean
  /** Judul dialog konfirmasi */
  confirmTitle?: string
  /** Pesan dialog konfirmasi (string statis atau fungsi penerima row) */
  confirmMessage?: string | ((row: T) => string)
  /** Teks tombol konfirmasi */
  confirmLabel?: string
  /** Teks tombol batal, default "Batal" */
  cancelLabel?: string
}

export interface DataTableActions<T = Record<string, any>> {
  view?: boolean | DataTableActionConfig<T>
  edit?: boolean | DataTableActionConfig<T>
  delete?: boolean | DataTableActionConfig<T>
}

DialogType & ConfirmVariant

Digunakan pada BaseDialog:

export type DialogType = 'error' | 'success' | 'warning' | 'info'
export type ConfirmVariant = 'primary' | 'danger' | 'success' | 'warning'

ConfirmType

Digunakan pada BaseConfirmDialog:

export type ConfirmType = 'warning' | 'info' | 'danger'

SpinnerVariant

Digunakan pada BaseLoadingDialog:

export type SpinnerVariant = 'primary' | 'success' | 'warning' | 'error'

ToastType

Digunakan pada BaseToast:

export type ToastType = 'success' | 'error' | 'warning' | 'info'

Kustomisasi Tema & Variabel CSS

@dtd-ui/vue mendefinisikan token desain pada selektor :root (di dalam src/style.css). Anda dapat menimpa (override) variabel CSS berikut pada stylesheet aplikasi utama Anda untuk menyesuaikan tema atau mode gelap:

Pengembangan & Build

Untuk menjalankan pengembangan lokal atau mem-build paket @dtd-ui/vue dari kode sumber:

# 1. Instal seluruh dependensi
npm install

# 2. Jalankan server pengembangan (Vite playground)
npm run dev

# 3. Kompilasi deklarasi tipe TypeScript (vue-tsc) dan bundle produksi (Vite)
npm run build

# 4. Pratinjau hasil build
npm run preview

Hasil build akan disimpan di dalam direktori dist/:

• dist/dtd-ui-vue.es.js — Bundle ES Module
• dist/dtd-ui-vue.umd.js — Bundle UMD
• dist/index.d.ts — Deklarasi tipe TypeScript lengkap

Lisensi

Dirilis di bawah lisensi MIT. Hak Cipta © 2026 DTD Design System Team.