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

package/src/web/selectbox/selectbox.vue

@@ -0,0 +1,1024 @@
+<template>
+  <div
+    ref="rootRef"
+    :class="`ttdk-form-item ${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-form-label ${labelClass || ''}`.trim()"
+        :for="id"
+        :style="{
+          ...buildUiVars(labelStyle),
+        }"
+        ><span>{{ label }}</span>
+        <template v-if="required">
+          <span class="ttdk-form-required" aria-hidden="true"> * </span>
+        </template>
+
+        <template v-if="optional">
+          <span class="ttdk-form-optional">{{
+            optionalText || "(Opsional)"
+          }}</span>
+        </template>
+      </label>
+    </template>
+
+    <template v-if="helperText && helperTextPosition === 'top'">
+      <div
+        :class="`ttdk-form-helper ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <div
+      role="combobox"
+      aria-haspopup="listbox"
+      ref="controlRef"
+      :class="`ttdk-selectbox-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'"
+      :style="{
+        ...buildUiVars(controlStyle),
+      }"
+      @click="
+        async (event) =>
+          disabled || readOnly || loading ? undefined : toggleDropdown()
+      "
+      @keydown="
+        async (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleDropdown();
+          } else if (e.key === 'Escape') {
+            closeDropdown();
+          }
+        }
+      "
+    >
+      <div class="ttdk-selectbox-display">
+        <template v-if="multiple && hasValue()">
+          <div class="ttdk-selectbox-chips">
+            <template
+              :key="chip.value"
+              v-for="(chip, index) in getMultiSelectedChips()"
+            >
+              <span class="ttdk-select-chip"
+                ><span class="ttdk-select-chip-text">{{ chip.label }}</span
+                ><button
+                  type="button"
+                  class="ttdk-select-chip-remove"
+                  :aria-label="`Hapus ${chip.label}`"
+                  @click="async (e) => handleRemoveTag(chip.value, e)"
+                >
+                  <svg
+                    class="ttdk-select-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-selectbox-value">{{
+            getSingleSelectedLabel()
+          }}</span>
+        </template>
+
+        <template v-if="!hasValue()">
+          <span class="ttdk-selectbox-placeholder">{{
+            placeholder || "Pilih dropdown menu"
+          }}</span>
+        </template>
+      </div>
+      <template
+        v-if="clearable && hasValue() && !disabled && !readOnly && !loading"
+      >
+        <button
+          type="button"
+          class="ttdk-selectbox-clear"
+          aria-label="Hapus pilihan"
+          @click="async (e) => handleClear(e)"
+        >
+          <svg
+            class="ttdk-selectbox-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-selectbox-spinner" aria-hidden="true"
+          ><svg
+            class="ttdk-selectbox-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">
+        <span
+          class="ttdk-selectbox-arrow"
+          :data-open="isOpen ? 'true' : 'false'"
+          ><svg
+            class="ttdk-selectbox-arrow-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline></svg
+        ></span>
+      </template>
+    </div>
+    <template v-if="isOpen && !disabled">
+      <div
+        role="listbox"
+        ref="dropdownRef"
+        :class="`ttdk-selectbox-dropdown ${menuClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(menuStyle || listStyle),
+        }"
+      >
+        <template v-if="searchable">
+          <div
+            class="ttdk-selectbox-search"
+            @click="async (e) => e.stopPropagation()"
+          >
+            <input
+              v-focus
+              type="text"
+              class="ttdk-selectbox-search-input"
+              :placeholder="searchPlaceholder || 'Cari'"
+              :value="searchQuery"
+              @input="async (e) => handleSearchInput(e)"
+              :autoFocus="true"
+            /><span class="ttdk-selectbox-search-icon" aria-hidden="true"
+              ><svg
+                class="ttdk-selectbox-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>
+
+        <div class="ttdk-selectbox-options-list">
+          <template :key="opt.value" v-for="(opt, index) in filteredOptions()">
+            <div
+              role="option"
+              :class="`ttdk-selectbox-option ${listClass || ''}`.trim()"
+              :aria-selected="isOptionSelected(opt.value)"
+              :aria-disabled="opt.disabled"
+              :data-selected="isOptionSelected(opt.value) ? 'true' : 'false'"
+              :data-disabled="opt.disabled ? 'true' : 'false'"
+              @click="
+                async (e) => {
+                  e.stopPropagation();
+                  if (multiple) {
+                    handleMultiToggle(opt);
+                  } else {
+                    handleSingleSelect(opt);
+                  }
+                }
+              "
+            >
+              <template v-if="multiple">
+                <span
+                  class="ttdk-selectbox-checkbox"
+                  :data-checked="isOptionSelected(opt.value) ? 'true' : 'false'"
+                >
+                  <template v-if="isOptionSelected(opt.value)">
+                    <svg
+                      class="ttdk-selectbox-checkbox-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                    >
+                      <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                  </template>
+                </span>
+              </template>
+
+              <span class="ttdk-selectbox-option-label">{{ opt.label }}</span>
+              <template v-if="!multiple && isOptionSelected(opt.value)">
+                <span class="ttdk-selectbox-check-icon" aria-hidden="true"
+                  ><svg
+                    class="ttdk-selectbox-check-svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline></svg
+                ></span>
+              </template>
+            </div>
+          </template>
+          <template v-if="filteredOptions().length === 0">
+            <div class="ttdk-selectbox-empty">Tidak ada pilihan ditemukan</div>
+          </template>
+        </div>
+        <template v-if="multiple">
+          <div
+            class="ttdk-selectbox-actions"
+            @click="async (e) => e.stopPropagation()"
+          >
+            <button
+              type="button"
+              class="ttdk-selectbox-btn-reset"
+              @click="async (event) => handleReset()"
+            >
+              <svg
+                class="ttdk-selectbox-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-selectbox-btn-apply"
+              @click="async (event) => handleApply()"
+            >
+              <span>{{ applyText || "Terapkan" }}</span
+              ><svg
+                class="ttdk-selectbox-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-form-helper ${helperTextClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(helperTextStyle),
+        }"
+      >
+        {{ helperText }}
+      </div>
+    </template>
+
+    <template v-if="errorMessage">
+      <div
+        role="alert"
+        :class="`ttdk-form-error ${errorMessageClass || ''}`.trim()"
+        :style="{
+          ...buildUiVars(errorMessageStyle),
+        }"
+      >
+        {{ errorMessage }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const vFocus = {
+  mounted: (el: HTMLElement) => {
+    el.focus();
+  },
+};
+import { onMounted, onUnmounted, ref } from "vue";
+
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  size as floatingSize,
+} from "@floating-ui/dom";
+import { buildUiVars, UiProps } from "../../core/types";
+
+export type SelectboxUiProps = UiProps;
+export interface SelectboxOption {
+  /**
+   * Teks label tampilan pilihan dropdown.
+   */
+  label: string;
+
+  /**
+   * Nilai unik (value) dari opsi pilihan.
+   */
+  value: string | number;
+
+  /**
+   * Status apakah opsi ini dinonaktifkan dari pemilihan.
+   * @default false
+   */
+  disabled?: boolean;
+}
+export interface SelectboxProps {
+  /**
+   * Teks label judul field yang ditampilkan di atas selectbox (14px Semibold, #141313).
+   */
+  label?: string;
+
+  /**
+   * Style kustom untuk elemen label judul field (UiProps).
+   */
+  labelStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen label judul field.
+   */
+  labelClass?: string;
+
+  /**
+   * Style kustom untuk elemen trigger kontrol selectbox (UiProps).
+   */
+  controlStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen trigger kontrol selectbox.
+   */
+  controlClass?: string;
+
+  /**
+   * Style kustom untuk elemen menu dropdown popover (UiProps).
+   */
+  menuStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen menu dropdown popover.
+   */
+  menuClass?: string;
+
+  /**
+   * Alias untuk menuStyle (konsistensi dengan Dropdown listStyle).
+   */
+  listStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk opsi list dropdown (atau alias menuClass).
+   */
+  listClass?: string;
+
+  /**
+   * Style kustom untuk elemen pesan error validasi (UiProps).
+   */
+  errorMessageStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen pesan error validasi.
+   */
+  errorMessageClass?: string;
+
+  /**
+   * Style kustom untuk elemen helper text (UiProps).
+   */
+  helperTextStyle?: UiProps;
+
+  /**
+   * Class CSS kustom untuk elemen helper text.
+   */
+  helperTextClass?: 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. Dapat berupa array of object `{ label, value }` atau array of string.
+   */
+  options?: Array<SelectboxOption | 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 selectbox.
+   */
+  id?: string;
+
+  /**
+   * Status apakah selectbox 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 selectbox.
+   * - `'sm'`: 36px
+   * - `'md'`: 48px (standar desain)
+   * - `'lg'`: 56px
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Bentuk sudut kelengkungan selectbox.
+   * - `'none'`: 0px
+   * - `'sm'`: 4px
+   * - `'md'`: 8px (standar desain)
+   * - `'lg'`: 12px
+   * - `'full'`: 9999px (kapsul)
+   * @default 'md'
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Menjadikan lebar field selectbox memenuhi kontainer penuh (full-width 100%).
+   * @default false
+   */
+  block?: boolean;
+
+  /**
+   * Status apakah selectbox dinonaktifkan (disabled).
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Menandai field sebagai input wajib diisi (menampilkan tanda bintang merah *).
+   * @default false
+   */
+  required?: boolean;
+
+  /**
+   * Ref instance elemen control selectbox untuk akses DOM langsung.
+   */
+  inputRef?: any;
+
+  /**
+   * Menampilkan tombol × untuk menghapus pilihan yang sudah dipilih.
+   * @default false
+   */
+  clearable?: boolean;
+
+  /**
+   * Menampilkan spinner loading dan menonaktifkan interaksi selectbox.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Menjadikan selectbox hanya-baca (tidak bisa dibuka/diubah).
+   * @default false
+   */
+  readOnly?: boolean;
+
+  /**
+   * Inline CSS style object native.
+   */
+  style?: any;
+
+  /**
+   * Kustomisasi visual granular root / form-item (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Callback event saat nilai pilihan berubah.
+   */
+  onChange?: (value: any) => void;
+
+  /**
+   * Callback event saat pengguna mengetik di kolom pencarian.
+   */
+  onSearch?: (query: string) => void;
+
+  /**
+   * Callback event saat menu dropdown terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * 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;
+
+  /**
+   * Callback event saat menu dropdown ditutup.
+   */
+  onClose?: () => void;
+}
+
+/**
+ * Komponen Selectbox TTDK sesuai spesifikasi Desain:
+ * - Single Select dengan Checkmark indicator dan Active Teal border (#00A3A6)
+ * - Multi-Select dengan Checkbox list, Chip tags (Label ✕), dan Action footer (Reset & Terapkan)
+ * - Searchable filter bar dengan input Cari 🔍
+ * - Visual States: Default, Active/Open, Filled, Error (#FF3A39), Disabled (#E4E5E7)
+ */
+
+const props = defineProps<SelectboxProps>();
+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;
+  computePosition(controlRef.value, dropdownRef.value, {
+    placement: "bottom-start",
+    strategy: "absolute",
+    middleware: [
+      offset(4),
+      flip({
+        padding: {
+          top: 80,
+          bottom: 16,
+          left: 16,
+          right: 16,
+        },
+      }),
+      ...(props.disableShift
+        ? []
+        : [
+            shift({
+              padding: {
+                top: 80,
+                bottom: 16,
+                left: 16,
+                right: 16,
+              },
+            }),
+          ]),
+      floatingSize({
+        apply({ rects, elements, availableHeight }) {
+          const customWidth =
+            props.menuStyle?.width !== undefined &&
+            props.menuStyle?.width !== null &&
+            props.menuStyle?.width !== ""
+              ? typeof props.menuStyle.width === "number" ||
+                /^\d+(\.\d+)?$/.test(String(props.menuStyle.width).trim())
+                ? `${String(props.menuStyle.width).trim()}px`
+                : String(props.menuStyle.width)
+              : 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)
+              : props.ui?.dropdownWidth !== undefined &&
+                props.ui?.dropdownWidth !== null &&
+                props.ui?.dropdownWidth !== ""
+              ? typeof props.ui.dropdownWidth === "number" ||
+                /^\d+(\.\d+)?$/.test(String(props.ui.dropdownWidth).trim())
+                ? `${String(props.ui.dropdownWidth).trim()}px`
+                : String(props.ui.dropdownWidth)
+              : undefined;
+          Object.assign(elements.floating.style, {
+            width: customWidth || `${rects.reference.width}px`,
+            minWidth: customWidth ? customWidth : undefined,
+            maxHeight: `${Math.min(availableHeight, 360)}px`,
+          });
+        },
+        padding: {
+          top: 80,
+          bottom: 16,
+          left: 16,
+          right: 16,
+        },
+      }),
+    ],
+  }).then(({ x, y, placement }: any) => {
+    if (!dropdownRef.value) return;
+    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) return;
+  const nextOpen = !isOpen.value;
+  isOpen.value = nextOpen;
+  if (nextOpen) {
+    if (props.multiple) {
+      tempMultiValue.value = Array.isArray(currentValue.value)
+        ? [...currentValue.value]
+        : [];
+    }
+    if (props.onOpen) props.onOpen();
+    setTimeout(() => {
+      startFloating();
+      if (props.searchable && dropdownRef.value) {
+        const searchInput = (dropdownRef.value as any).querySelector?.(
+          ".ttdk-selectbox-search-input"
+        );
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    }, 0);
+  } else {
+    stopFloating();
+    searchQuery.value = "";
+    if (props.onClose) props.onClose();
+  }
+}
+function closeDropdown() {
+  stopFloating();
+  isOpen.value = false;
+  searchQuery.value = "";
+  if (props.onClose) props.onClose();
+}
+function normalizedOptions() {
+  if (!props.options || !Array.isArray(props.options)) return [];
+  return props.options.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),
+      };
+    }
+    return {
+      label: String(opt),
+      value: opt,
+      disabled: false,
+    };
+  });
+}
+function filteredOptions() {
+  const opts = normalizedOptions();
+  if (!searchQuery.value || !searchQuery.value.trim()) return opts;
+  const q = searchQuery.value.toLowerCase().trim();
+  return opts.filter((opt: any) => opt.label.toLowerCase().includes(q));
+}
+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;
+  currentValue.value = opt.value;
+  if (props.onChange) {
+    props.onChange(opt.value);
+  }
+  closeDropdown();
+}
+function handleMultiToggle(opt: any) {
+  if (opt.disabled || props.disabled) return;
+  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() {
+  const opts = normalizedOptions();
+  const match = opts.find(
+    (opt: any) => String(opt.value) === String(currentValue.value)
+  );
+  return match ? match.label : "";
+}
+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.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>