@ttdk-design-system/library-vue 0.0.0-stage → 1.0.0

package/src/web/dropdown/dropdown.vue.d.ts

@@ -0,0 +1,381 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export interface DropdownOption {
+  /**
+   * Teks label tampilan pilihan dropdown menu.
+   */
+  label: string;
+
+  /**
+   * Nilai unik (value) dari item dropdown.
+   */
+  value: string | number;
+
+  /**
+   * Status apakah opsi ini dinonaktifkan dari pemilihan.
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Ikon kustom di samping label item pilihan.
+   */
+  icon?: any;
+
+  /**
+   * Deskripsi atau teks bantuan kecil di bawah label item pilihan.
+   */
+  description?: string;
+
+  /**
+   * Menandai item sebagai aksi berbahaya/destruktif (misal: "Hapus"), ditampilkan dengan warna aksen merah.
+   * @default false
+   */
+  danger?: boolean;
+
+  /**
+   * Menampilkan garis pemisah horizontal (divider) di atas item ini.
+   * @default false
+   */
+  divider?: boolean;
+
+  /**
+   * Callback event saat item ini diklik.
+   */
+  onClick?: (option?: DropdownOption) => void;
+}
+
+export type DropdownMenuItem = DropdownOption;
+
+export type DropdownUiProps = UiProps;
+
+export interface DropdownProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas dropdown (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Menandai field sebagai opsi opsional dengan menambahkan teks '(Opsional)' (12px Regular, #9698A2).
+   * @default false
+   */
+  optional?: boolean;
+
+  /**
+   * Kustomisasi teks keterangan opsional.
+   * @default '(Opsional)'
+   */
+  optionalText?: string;
+
+  /**
+   * Teks petunjuk saat belum ada opsi yang dipilih.
+   * @default 'Pilih dropdown menu'
+   */
+  placeholder?: string;
+
+  /**
+   * Nilai terpilih saat ini (single string/number atau array nilai untuk mode multiple).
+   */
+  value?: any;
+
+  /**
+   * Nilai awal tidak terkontrol (uncontrolled initial value).
+   */
+  defaultValue?: any;
+
+  /**
+   * Daftar pilihan opsi dropdown menu. Dapat berupa array of object `{ label, value }` atau array of string.
+   */
+  options?: Array<DropdownOption | string>;
+
+  /**
+   * Mode pemilihan jamak (multi-select) dengan tampilan chips/tag dan daftar checkbox.
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Mengaktifkan kotak pencarian (search input) di dalam menu dropdown.
+   * @default false
+   */
+  searchable?: boolean;
+
+  /**
+   * Placeholder pada kotak pencarian di dalam dropdown.
+   * @default 'Cari'
+   */
+  searchPlaceholder?: string;
+
+  /**
+   * Teks tombol terapkan pada footer multi-select.
+   * @default 'Terapkan'
+   */
+  applyText?: string;
+
+  /**
+   * Teks tombol reset pada footer multi-select.
+   * @default 'Reset'
+   */
+  resetText?: string;
+
+  /**
+   * Nama form field HTML.
+   */
+  name?: string;
+
+  /**
+   * Identifier unik elemen dropdown.
+   */
+  id?: string;
+
+  /**
+   * Status apakah dropdown sedang dalam kondisi error / tidak valid.
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Pesan teks penjelasan kesalahan validasi di bawah field.
+   */
+  errorMessage?: string;
+
+  /**
+   * Teks petunjuk atau keterangan bantuan di bawah field (12px Regular, #3C4245).
+   */
+  helperText?: string;
+
+  /**
+   * Posisi teks helper
+   */
+  helperTextPosition?: "top" | "bottom";
+
+  /**
+   * Skala ukuran dropdown.
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar desain)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan dropdown.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Posisi penempatan panel menu dropdown popover terhadap elemen trigger.
+   * @default 'bottom-start'
+   */
+  placement?:
+    | "bottom-start"
+    | "bottom-end"
+    | "bottom"
+    | "top-start"
+    | "top-end"
+    | "top";
+
+  /**
+   * Menampilkan panah chevron indikator buka/tutup pada trigger.
+   * @default true
+   */
+  arrow?: boolean;
+
+  /**
+   * Ikon kustom di awal teks trigger (leading icon).
+   */
+  icon?: any;
+
+  /**
+   * Otomatis menutup menu popover setelah pengguna memilih opsi (pada single select).
+   * @default true
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Menjadikan lebar field dropdown memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah dropdown dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Ref instance elemen control dropdown untuk akses DOM langsung.
+   */
+  inputRef?: any;
+
+  /**
+   * Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.
+   * @default false
+   */
+  clearable?: boolean;
+
+  /**
+   * Menampilkan spinner loading dan menonaktifkan interaksi dropdown.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menjadikan dropdown hanya-baca (tidak bisa dibuka/diubah).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Kustomisasi visual granular wrapper utama (UiProps).
+   */
+  ui?: DropdownUiProps;
+
+  /**
+   * Style inline native untuk wrapper luar.
+   */
+  style?: any;
+
+  /**
+   * Style kustom untuk elemen label (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label (Tailwind / class kustom).
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen kotak pemicu (control trigger) (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen kotak pemicu (control trigger) (Tailwind / class kustom).
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk panel popover / menu list opsi (UiProps).
+   */
+  listStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk panel popover / menu list opsi (Tailwind / class kustom).
+   */
+  listClass?: string;
+
+  /**
+   * Style kustom untuk pesan teks error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk pesan teks error validasi (Tailwind / class kustom).
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk teks petunjuk bantuan (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk teks petunjuk bantuan (Tailwind / class kustom).
+   */
+  helperTextClass?: string;
+
+  /**
+   * Callback event saat nilai pilihan berubah.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Callback event saat sebuah opsi dipilih dari menu.
+   */
+  onSelect?: (option: DropdownOption) => void;
+
+  /**
+   * Callback event saat pengguna mengetik di kolom pencarian.
+   */
+  onSearch?: (query: string) => void;
+
+  /**
+   * Callback event saat menu dropdown terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback event saat menu dropdown ditutup.
+   */
+  onClose?: () => void;
+
+  /**
+   * Menonaktifkan middleware `shift` pada floating-ui sehingga posisi list popover
+   * tidak bergeser secara horizontal mengikuti tepi layar.
+   * Berguna saat ingin list tetap berada di tengah atau posisi placement yang ditentukan.
+   * @default false
+   */
+  disableShift?: boolean;
+
+  /**
+   * Class CSS kustom wrapper luar.
+   */
+  className?: string;
+
+  /**
+   * Elemen pemicu (trigger) kustom, tombol, ikon, atau komponen anak lainnya.
+   */
+  children?: any;
+
+  /**
+   * Konten kustom yang ditampilkan di dalam panel popover menggantikan list opsi standar.
+   * Berguna untuk menampilkan komponen seperti Calendar, Color Picker, dsb. di dalam Dropdown.
+   * Ketika prop ini di-set, `options` tidak akan dirender.
+   * Menerima ReactNode atau render function `({ close }) => ReactNode`.
+   */
+  panelContent?: any;
+
+  /**
+   * Label atau teks kustom untuk ditampilkan pada trigger dropdown.
+   * Sangat berguna saat menggunakan `panelContent` seperti Date Picker di mana nilai trigger diformat secara kustom.
+   */
+  displayValue?: string;
+
+  /**
+   * Strategi positioning Floating UI ('fixed' atau 'absolute').
+   * Default 'fixed' agar dropdown tidak terpotong (clipped) oleh kontainer parent yang memiliki `overflow: hidden`.
+   * @default 'fixed'
+   */
+  // strategy?: 'fixed' | 'absolute';
+}
+
+export type DropdownMenuProps = DropdownProps;
+
+declare const component: DefineComponent<DropdownProps>;
+export default component;

package/src/web/dropdown/index.ts

@@ -0,0 +1,3 @@
+export { default } from './dropdown.vue';
+export { default as Dropdown } from './dropdown.vue';
+export * from './dropdown.vue';