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

package/src/web/dropdown/dropdown.vue

@@ -0,0 +1,1257 @@
+<template>
+  <div
+    ref="rootRef"
+    :class="`ttdk-dropdown-wrapper ${className || ''}`.trim()"
+    :data-disabled="disabled"
+    :data-error="Boolean(error || errorMessage)"
+    :data-size="size || 'md'"
+    :data-block="block ? 'true' : undefined"
+    :style="{
+      ...buildUiVars(ui),
+      ...(ui || {}),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <template v-if="label">
+      <label
+        :class="`ttdk-dropdown-label ${labelClass || ''}`.trim()"
+        :for="id"
+        :style="{
+          ...buildUiVars(labelStyle),
+        }"
+        ><span>{{ label }}</span>
+        <template v-if="required">
+          <span class="ttdk-dropdown-required" aria-hidden="true"> * </span>
+        </template>
+
+        <template v-if="optional">
+          <span class="ttdk-dropdown-optional">{{
+            optionalText || "(Opsional)"
+          }}</span>
+        </template>
+      </label>
+    </template>
+
+    <template v-if="helperText && helperTextPosition === 'top'">
+      <div
+        :class="`ttdk-dropdown-helper-text ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <div
+      role="button"
+      aria-haspopup="menu"
+      ref="controlRef"
+      :class="`ttdk-dropdown-control ${controlClass || ''}`.trim()"
+      :id="id"
+      :tabIndex="disabled ? -1 : 0"
+      :aria-expanded="isOpen"
+      :aria-disabled="disabled"
+      :aria-invalid="Boolean(error || errorMessage)"
+      :data-open="isOpen ? 'true' : 'false'"
+      :data-filled="hasValue() ? 'true' : 'false'"
+      :data-error="Boolean(error || errorMessage)"
+      :data-disabled="Boolean(disabled)"
+      :data-size="size || 'md'"
+      :data-rounded="rounded || 'md'"
+      :data-custom-trigger="$slots.default ? 'true' : undefined"
+      :style="{
+        ...buildUiVars(controlStyle),
+      }"
+      @click="async (event) => toggleDropdown()"
+      @keydown="
+        async (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          } else if (e.key === 'Escape') {
+            closeDropdown();
+          }
+        }
+      "
+    >
+      <template v-if="$slots.default">
+        <slot />
+      </template>
+
+      <template v-if="!$slots.default">
+        <div class="ttdk-dropdown-display">
+          <template v-if="icon">
+            <span class="ttdk-dropdown-leading-icon" aria-hidden="true">{{
+              icon
+            }}</span>
+          </template>
+
+          <template v-if="multiple && hasValue()">
+            <div class="ttdk-dropdown-chips">
+              <template
+                :key="chip.value"
+                v-for="(chip, index) in getMultiSelectedChips()"
+              >
+                <span class="ttdk-dropdown-chip"
+                  ><span class="ttdk-dropdown-chip-text">{{ chip.label }}</span
+                  ><button
+                    type="button"
+                    class="ttdk-dropdown-chip-remove"
+                    :aria-label="`Hapus ${chip.label}`"
+                    @click="async (e) => handleRemoveTag(chip.value, e)"
+                  >
+                    <svg
+                      class="ttdk-dropdown-chip-remove-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg></button
+                ></span>
+              </template>
+            </div>
+          </template>
+
+          <template v-if="!multiple && hasValue()">
+            <span class="ttdk-dropdown-value">{{
+              getSingleSelectedLabel()
+            }}</span>
+          </template>
+
+          <template v-if="!hasValue()">
+            <span class="ttdk-dropdown-placeholder">{{
+              placeholder || "Pilih dropdown menu"
+            }}</span>
+          </template>
+        </div>
+
+        <template
+          v-if="clearable && hasValue() && !disabled && !readOnly && !loading"
+        >
+          <button
+            type="button"
+            class="ttdk-dropdown-clear"
+            aria-label="Hapus pilihan"
+            @click="async (e) => handleClear(e)"
+          >
+            <svg
+              class="ttdk-dropdown-clear-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </template>
+
+        <template v-if="loading">
+          <span class="ttdk-dropdown-spinner" aria-hidden="true"
+            ><svg
+              class="ttdk-dropdown-spinner-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.175"
+                transform="rotate(0 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.25"
+                transform="rotate(30 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.325"
+                transform="rotate(60 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.4"
+                transform="rotate(90 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.475"
+                transform="rotate(120 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.55"
+                transform="rotate(150 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.625"
+                transform="rotate(180 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.7"
+                transform="rotate(210 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.775"
+                transform="rotate(240 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.85"
+                transform="rotate(270 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="0.925"
+                transform="rotate(300 12 12)"
+              ></line>
+              <line
+                x1="12"
+                y1="2.5"
+                x2="12"
+                y2="6.5"
+                opacity="1"
+                transform="rotate(330 12 12)"
+              ></line></svg
+          ></span>
+        </template>
+
+        <template v-if="!loading && arrow !== false">
+          <span
+            class="ttdk-dropdown-arrow"
+            :data-open="isOpen ? 'true' : 'false'"
+            ><svg
+              class="ttdk-dropdown-arrow-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline></svg
+          ></span>
+        </template>
+      </template>
+    </div>
+    <template v-if="isOpen && !disabled">
+      <div
+        class="ttdk-dropdown-menu"
+        role="menu"
+        ref="dropdownRef"
+        :style="{
+          ...buildUiVars(listStyle),
+          ...(listStyle?.width !== undefined &&
+          listStyle?.width !== null &&
+          listStyle?.width !== ''
+            ? {
+                width:
+                  typeof listStyle.width === 'number' ||
+                  /^\d+(\.\d+)?$/.test(String(listStyle.width).trim())
+                    ? `${String(listStyle.width).trim()}px`
+                    : String(listStyle.width),
+                minWidth:
+                  typeof listStyle.width === 'number' ||
+                  /^\d+(\.\d+)?$/.test(String(listStyle.width).trim())
+                    ? `${String(listStyle.width).trim()}px`
+                    : String(listStyle.width),
+              }
+            : {}),
+        }"
+      >
+        <template v-if="searchable">
+          <div
+            class="ttdk-dropdown-search"
+            @click="async (e) => e.stopPropagation()"
+          >
+            <input
+              v-focus
+              type="text"
+              class="ttdk-dropdown-search-input"
+              :placeholder="searchPlaceholder || 'Cari'"
+              :value="searchQuery"
+              @input="async (e) => handleSearchInput(e)"
+              :autoFocus="true"
+            /><span class="ttdk-dropdown-search-icon" aria-hidden="true"
+              ><svg
+                class="ttdk-dropdown-search-svg"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <circle cx="11" cy="11" r="8"></circle>
+                <line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg
+            ></span>
+          </div>
+        </template>
+
+        <template v-if="panelContent || $slots.panelContent">
+          <div
+            class="ttdk-dropdown-panel-content"
+            @click="async (e) => e.stopPropagation()"
+          >
+            <slot name="panelContent" :close="() => closeDropdown()">
+              <template v-if="typeof panelContent === 'function'">
+                {{
+                  panelContent({
+                    close: () => closeDropdown(),
+                  })
+                }}
+              </template>
+
+              <template v-else>
+                {{ panelContent }}
+              </template>
+            </slot>
+          </div>
+        </template>
+
+        <template v-if="!panelContent && !$slots.panelContent">
+          <div class="ttdk-dropdown-options-list" role="presentation">
+            <template
+              :key="opt.value"
+              v-for="(opt, index) in filteredOptions()"
+            >
+              <div>
+                <template v-if="opt.divider">
+                  <div class="ttdk-dropdown-divider" role="separator"></div>
+                </template>
+
+                <div
+                  :class="`ttdk-dropdown-option ${listClass || ''}`.trim()"
+                  :role="multiple ? 'menuitemcheckbox' : 'menuitem'"
+                  :aria-selected="isOptionSelected(opt.value)"
+                  :aria-disabled="opt.disabled"
+                  :data-selected="
+                    isOptionSelected(opt.value) ? 'true' : 'false'
+                  "
+                  :data-disabled="opt.disabled ? 'true' : 'false'"
+                  :data-danger="opt.danger ? 'true' : undefined"
+                  @click="
+                    async (e) => {
+                      e.stopPropagation();
+                      if (multiple) {
+                        handleMultiToggle(opt);
+                      } else {
+                        handleSingleSelect(opt);
+                      }
+                    }
+                  "
+                >
+                  <template v-if="multiple">
+                    <span
+                      class="ttdk-dropdown-checkbox"
+                      :data-checked="
+                        isOptionSelected(opt.value) ? 'true' : 'false'
+                      "
+                    >
+                      <template v-if="isOptionSelected(opt.value)">
+                        <svg
+                          class="ttdk-dropdown-checkbox-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                        >
+                          <polyline points="20 6 9 17 4 12"></polyline>
+                        </svg>
+                      </template>
+                    </span>
+                  </template>
+
+                  <template v-if="opt.icon">
+                    <span
+                      class="ttdk-dropdown-option-icon"
+                      aria-hidden="true"
+                      >{{ opt.icon }}</span
+                    >
+                  </template>
+
+                  <div class="ttdk-dropdown-option-content">
+                    <span class="ttdk-dropdown-option-label">{{
+                      opt.label
+                    }}</span>
+                    <template v-if="opt.description">
+                      <span class="ttdk-dropdown-option-desc">{{
+                        opt.description
+                      }}</span>
+                    </template>
+                  </div>
+                  <template v-if="!multiple && isOptionSelected(opt.value)">
+                    <span class="ttdk-dropdown-check-icon" aria-hidden="true"
+                      ><svg
+                        class="ttdk-dropdown-check-svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                      >
+                        <polyline points="20 6 9 17 4 12"></polyline></svg
+                    ></span>
+                  </template>
+                </div>
+              </div>
+            </template>
+            <template v-if="filteredOptions().length === 0">
+              <div class="ttdk-dropdown-empty">Tidak ada pilihan ditemukan</div>
+            </template>
+          </div>
+        </template>
+
+        <template v-if="multiple">
+          <div
+            class="ttdk-dropdown-actions"
+            @click="async (e) => e.stopPropagation()"
+          >
+            <button
+              type="button"
+              class="ttdk-dropdown-btn-reset"
+              @click="async (event) => handleReset()"
+            >
+              <svg
+                class="ttdk-dropdown-btn-reset-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                ></path>
+                <path d="M3 3v5h5"></path></svg
+              ><span>{{ resetText || "Reset" }}</span></button
+            ><button
+              type="button"
+              class="ttdk-dropdown-btn-apply"
+              @click="async (event) => handleApply()"
+            >
+              <span>{{ applyText || "Terapkan" }}</span
+              ><svg
+                class="ttdk-dropdown-btn-apply-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            </button>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <template v-if="helperText && helperTextPosition !== 'top'">
+      <div
+        :class="`ttdk-dropdown-helper-text ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <template v-if="errorMessage || (typeof error === 'string' && error)">
+      <div
+        role="alert"
+        :class="`ttdk-dropdown-error-text ${errorMessageClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(errorMessageStyle),
+        }"
+      >
+        {{ errorMessage || (typeof error === "string" ? error : "") }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const vFocus = {
+  mounted: (el: HTMLElement) => {
+    el.focus();
+  },
+};
+import { onMounted, onUnmounted, ref, useSlots } from "vue";
+const slots = useSlots();
+
+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;
+
+/**
+ * Komponen Dropdown Menu TTDK sesuai spesifikasi Desain:
+ * - Selaras UI & Props dengan Selectbox: Label, Helper/Error text, Search bar, Floating popover
+ * - Mode Single Select / Menu Actions dengan Active Teal Checkmark (#00A3A6)
+ * - Mode Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan)
+ * - Varian trigger fleksibel: 'select' (standar form), 'action' / 'primary' (tombol aksi), 'outline', 'ghost'
+ * - Dukungan Trigger Kustom melalui Slot / Children (misal: tombol kustom)
+ * - Dukungan item kaya: Icon, Deskripsi, Divider pemisah seksi, dan Danger item
+ */
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  arrow: true,
+  closeOnSelect: true,
+});
+const isOpen = ref(false);
+const searchQuery = ref("");
+const currentValue = ref(
+  props.value !== undefined
+    ? props.value
+    : props.defaultValue !== undefined
+    ? props.defaultValue
+    : props.multiple
+    ? []
+    : ""
+);
+const tempMultiValue = ref([]);
+const cleanupAutoUpdate = ref(null);
+
+const rootRef = ref<HTMLDivElement>(null);
+const controlRef = ref<HTMLDivElement>(null);
+const dropdownRef = ref<HTMLDivElement>(null);
+
+onMounted(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener(
+      "pointerdown",
+      (e: any) => onPointerDown(e),
+      true
+    );
+  }
+});
+onUnmounted(() => {
+  stopFloating();
+  if (typeof document !== "undefined") {
+    document.removeEventListener(
+      "pointerdown",
+      (e: any) => onPointerDown(e),
+      true
+    );
+  }
+});
+
+function updatePosition() {
+  if (!controlRef.value || !dropdownRef.value) return;
+  dropdownRef.value.style.maxHeight = "";
+  computePosition(controlRef.value, dropdownRef.value, {
+    placement: props.placement || "bottom-start",
+    strategy: "absolute",
+    middleware: [
+      offset(4),
+      flip({
+        fallbackPlacements: [
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+        ],
+        padding: {
+          top: 16,
+          bottom: 16,
+          left: 16,
+          right: 16,
+        },
+      }),
+      ...(props.disableShift
+        ? []
+        : [
+            shift({
+              padding: {
+                top: 16,
+                bottom: 16,
+                left: 16,
+                right: 16,
+              },
+            }),
+          ]),
+      floatingSize({
+        apply({ rects, elements, availableHeight }) {
+          const isPanel = Boolean(props.panelContent || slots.panelContent);
+          const customWidth =
+            props.listStyle?.width !== undefined &&
+            props.listStyle?.width !== null &&
+            props.listStyle?.width !== ""
+              ? typeof props.listStyle.width === "number" ||
+                /^\d+(\.\d+)?$/.test(String(props.listStyle.width).trim())
+                ? `${String(props.listStyle.width).trim()}px`
+                : String(props.listStyle.width)
+              : undefined;
+          const customMaxHeight =
+            props.listStyle?.maxHeight !== undefined &&
+            props.listStyle?.maxHeight !== null &&
+            props.listStyle?.maxHeight !== ""
+              ? props.listStyle.maxHeight === "none"
+                ? "none"
+                : typeof props.listStyle.maxHeight === "number" ||
+                  /^\d+(\.\d+)?$/.test(String(props.listStyle.maxHeight).trim())
+                ? `${String(props.listStyle.maxHeight).trim()}px`
+                : String(props.listStyle.maxHeight)
+              : undefined;
+          Object.assign(elements.floating.style, {
+            width:
+              customWidth || (isPanel ? "auto" : `${rects.reference.width}px`),
+            minWidth: customWidth ? customWidth : isPanel ? "auto" : undefined,
+            maxHeight:
+              customMaxHeight !== undefined
+                ? customMaxHeight
+                : isPanel
+                ? "none"
+                : `${Math.max(180, Math.min(availableHeight, 360))}px`,
+          });
+        },
+        padding: {
+          top: 16,
+          bottom: 16,
+          left: 16,
+          right: 16,
+        },
+      }),
+    ],
+  }).then(({ x, y, placement }: any) => {
+    if (!dropdownRef.value) return;
+    dropdownRef.value.style.position = "absolute";
+    dropdownRef.value.style.left = `${x}px`;
+    dropdownRef.value.style.top = `${y}px`;
+    dropdownRef.value.setAttribute("data-placement", placement);
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (controlRef.value && dropdownRef.value) {
+    cleanupAutoUpdate.value = autoUpdate(
+      controlRef.value,
+      dropdownRef.value,
+      () => {
+        updatePosition();
+      }
+    );
+  }
+}
+function stopFloating() {
+  if (typeof cleanupAutoUpdate.value === "function") {
+    cleanupAutoUpdate.value();
+    cleanupAutoUpdate.value = null;
+  }
+}
+function handleClickOutside(event: any) {
+  if (!dropdownRef.value) return;
+  const target = event.target;
+  if (
+    rootRef.value &&
+    !rootRef.value.contains(target) &&
+    dropdownRef.value &&
+    !dropdownRef.value.contains(target)
+  ) {
+    closeDropdown();
+  }
+}
+function onPointerDown(event: any) {
+  handleClickOutside(event);
+}
+function toggleDropdown() {
+  if (props.disabled || props.readOnly || props.loading) return;
+  if (isOpen.value) {
+    closeDropdown();
+  } else {
+    openDropdown();
+  }
+}
+function openDropdown() {
+  if (props.disabled || props.readOnly || props.loading) return;
+  isOpen.value = true;
+  searchQuery.value = "";
+  if (props.multiple) {
+    tempMultiValue.value = Array.isArray(currentValue.value)
+      ? [...currentValue.value]
+      : [];
+  }
+  setTimeout(() => {
+    startFloating();
+    updatePosition();
+    if (props.searchable && dropdownRef.value) {
+      const searchInput = (dropdownRef.value as any).querySelector?.(
+        ".ttdk-dropdown-search-input"
+      );
+      if (searchInput) {
+        searchInput.focus();
+      }
+    }
+  }, 0);
+  if (props.onOpen) props.onOpen();
+}
+function closeDropdown() {
+  stopFloating();
+  isOpen.value = false;
+  searchQuery.value = "";
+  if (props.onClose) props.onClose();
+}
+function normalizedOptions() {
+  const raw = props.options;
+  if (!raw || !Array.isArray(raw)) return [];
+  return raw.map((opt: any) => {
+    if (typeof opt === "object" && opt !== null) {
+      return {
+        label: String(opt.label ?? opt.value ?? ""),
+        value: opt.value ?? opt.label ?? "",
+        disabled: Boolean(opt.disabled),
+        icon: opt.icon,
+        description: opt.description,
+        danger: Boolean(opt.danger),
+        divider: Boolean(opt.divider),
+        onClick: opt.onClick,
+      };
+    }
+    return {
+      label: String(opt),
+      value: opt,
+      disabled: false,
+      icon: undefined,
+      description: undefined,
+      danger: false,
+      divider: false,
+      onClick: undefined,
+    };
+  });
+}
+function filteredOptions() {
+  const opts = normalizedOptions();
+  if (!searchQuery.value || !searchQuery.value.trim()) return opts;
+  const q = searchQuery.value.toLowerCase().trim();
+  return opts.filter((opt: any) => {
+    const matchLabel = opt.label && opt.label.toLowerCase().includes(q);
+    const matchDesc =
+      opt.description && opt.description.toLowerCase().includes(q);
+    return matchLabel || matchDesc;
+  });
+}
+function isOptionSelected(optValue: any) {
+  if (props.multiple) {
+    const list = isOpen.value
+      ? tempMultiValue.value
+      : Array.isArray(currentValue.value)
+      ? currentValue.value
+      : [];
+    return list.some((v: any) => String(v) === String(optValue));
+  }
+  return String(currentValue.value) === String(optValue);
+}
+function handleSingleSelect(opt: any) {
+  if (opt.disabled || props.disabled) return;
+  if (opt.onClick) {
+    opt.onClick(opt);
+  }
+  currentValue.value = opt.value;
+  if (props.onSelect) {
+    props.onSelect(opt);
+  }
+  if (props.onChange) {
+    props.onChange(opt.value);
+  }
+  if (props.closeOnSelect !== false) {
+    closeDropdown();
+  }
+}
+function handleMultiToggle(opt: any) {
+  if (opt.disabled || props.disabled) return;
+  if (opt.onClick) {
+    opt.onClick(opt);
+  }
+  const index = tempMultiValue.value.findIndex(
+    (v: any) => String(v) === String(opt.value)
+  );
+  if (index > -1) {
+    tempMultiValue.value.splice(index, 1);
+  } else {
+    tempMultiValue.value.push(opt.value);
+  }
+}
+function handleRemoveTag(val: any, event: any) {
+  if (event && event.stopPropagation) event.stopPropagation();
+  if (props.disabled) return;
+  if (Array.isArray(currentValue.value)) {
+    const next = currentValue.value.filter(
+      (v: any) => String(v) !== String(val)
+    );
+    currentValue.value = next;
+    tempMultiValue.value = [...next];
+    if (props.onChange) {
+      props.onChange(next);
+    }
+  }
+}
+function handleApply() {
+  currentValue.value = [...tempMultiValue.value];
+  if (props.onChange) {
+    props.onChange(currentValue.value);
+  }
+  closeDropdown();
+}
+function handleReset() {
+  tempMultiValue.value = [];
+  currentValue.value = [];
+  if (props.onChange) {
+    props.onChange([]);
+  }
+}
+function handleSearchInput(e: any) {
+  searchQuery.value = e.target.value;
+  if (props.onSearch) {
+    props.onSearch(e.target.value);
+  }
+}
+function getSingleSelectedLabel() {
+  if (
+    props.displayValue !== undefined &&
+    props.displayValue !== null &&
+    props.displayValue !== ""
+  ) {
+    return props.displayValue;
+  }
+  const opts = normalizedOptions();
+  const match = opts.find(
+    (opt: any) => String(opt.value) === String(currentValue.value)
+  );
+  if (match) {
+    return match.label;
+  }
+  if (
+    currentValue.value !== undefined &&
+    currentValue.value !== null &&
+    currentValue.value !== ""
+  ) {
+    return String(currentValue.value);
+  }
+  return "";
+}
+function getMultiSelectedChips() {
+  const list = Array.isArray(currentValue.value) ? currentValue.value : [];
+  const opts = normalizedOptions();
+  return list.map((val: any) => {
+    const match = opts.find((o: any) => String(o.value) === String(val));
+    return {
+      value: val,
+      label: match ? match.label : String(val),
+    };
+  });
+}
+function hasValue() {
+  if (
+    props.displayValue !== undefined &&
+    props.displayValue !== null &&
+    props.displayValue !== ""
+  ) {
+    return true;
+  }
+  if (props.multiple) {
+    return Array.isArray(currentValue.value) && currentValue.value.length > 0;
+  }
+  return (
+    currentValue.value !== undefined &&
+    currentValue.value !== "" &&
+    currentValue.value !== null
+  );
+}
+function handleClear(event: any) {
+  if (event && event.stopPropagation) event.stopPropagation();
+  if (props.disabled || props.readOnly) return;
+  const emptyVal = props.multiple ? [] : "";
+  currentValue.value = emptyVal;
+  tempMultiValue.value = [];
+  if (props.onChange) {
+    props.onChange(emptyVal);
+  }
+}
+</script>