@dasidev/dasi-ui 1.0.0

package/src/components/selector/BaseSelector.vue

@@ -0,0 +1,1136 @@
+<script setup lang="ts">
+/**
+ * BaseSelector - Unified Selector Component
+ *
+ * This component consolidates all selector variants (BaseSelectorSingle, BaseSelectorSingleAvatar, etc.)
+ * into a single, highly configurable component. It supports both single and multiple selection modes,
+ * avatar display, custom field mapping, and comprehensive API integration.
+ *
+ * Key Features:
+ * - Single & Multiple Selection: Flexible selection modes
+ * - Avatar Display: User avatars with fallback support
+ * - Auto-fill Organization: Automatic organization selection
+ * - Custom Field Mapping: Flexible field configuration
+ * - Debounced Search: 300ms search debouncing for performance
+ * - Pagination Support: Built-in pagination with navigation
+ * - Error Handling: Comprehensive error handling with user feedback
+ * - Loading States: Visual feedback during API calls
+ * - Keyboard Navigation: Full keyboard accessibility
+ *
+ * @example
+ * // Basic single selection
+ * <BaseSelector
+ *   v-model="selectedUserId"
+ *   endpoint="/api/users"
+ *   placeholder="Select a user..."
+ * />
+ *
+ * @example
+ * // Multiple selection with avatars
+ * <BaseSelector
+ *   v-model="selectedUsers"
+ *   endpoint="/api/users"
+ *   :multiple="true"
+ *   :show-avatar="true"
+ *   :return-object="true"
+ * />
+ *
+ * @example
+ * // Organization selector with auto-fill
+ * <BaseSelector
+ *   v-model="selectedOrg"
+ *   endpoint="/api/organizations"
+ *   :show-avatar="true"
+ *   :auto-fill-org="true"
+ *   access-level="admin"
+ * />
+ */
+
+import api from "@/api/api";
+import DialogSelect, { type PageMeta } from "@/components/dialog/DialogSelect.vue";
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import { ChevronRight, LucideX } from "lucide-vue-next";
+import { onMounted, watch, ref, computed, onUnmounted } from "vue";
+import { cn } from "@/lib/utils";
+import { useDebounceSearch, useMemoryManagement } from "@/lib/performance.utils";
+import Avatar from "@/components/ui/avatar/Avatar.vue";
+import AvatarFallback from "@/components/ui/avatar/AvatarFallback.vue";
+import AvatarImage from "@/components/ui/avatar/AvatarImage.vue";
+import CheckboxElement from "@/components/helper/CheckboxElement.vue";
+import { toast } from "vue-sonner";
+
+/**
+ * Interface for items returned from the API
+ * Represents a selectable item with optional avatar and access level information
+ */
+interface SelectItem {
+  id: string | number;
+  name: string;
+  description?: string;
+  avatar?: string;
+  isChecked?: boolean;
+  accessLevel?: {
+    code: string;
+    name: string;
+  };
+  [key: string]: any; // Allow additional fields for flexibility
+}
+
+/**
+ * Props interface for BaseSelector component
+ * Consolidates all functionality from previous selector variants
+ */
+interface BaseSelectorProps {
+  // Core functionality (from BaseSelectorSingle.vue)
+  /** API endpoint for data fetching */
+  endpoint: string;
+  /** Placeholder text when no item is selected */
+  placeholder?: string;
+  /** Title for the selection dialog */
+  title?: string;
+  /** Custom name field for display (supports dot notation like 'user.name') */
+  nameField?: string;
+  /** Custom function to format the name field */
+  nameFieldFunc?: Function;
+  /** Custom description field for display (supports dot notation) */
+  descriptionField?: string;
+  /** Custom function to format the description field */
+  descriptionFieldFunc?: Function;
+  /** Disable automatic data loading on mount */
+  disableAutoLoad?: boolean;
+  /** Disable the selector */
+  disabled?: boolean;
+  /** Columns to search in (comma-separated) */
+  searchColumns?: string;
+
+  // Avatar functionality (from BaseSelectorSingleAvatar.vue)
+  /** Show avatar display functionality */
+  showAvatar?: boolean;
+  /** Auto-fill with user organization */
+  autoFillOrg?: boolean;
+  /** Required access level for auto-fill */
+  accessLevel?: string;
+
+  // Return value configuration
+  /** If true, returns full object; if false, returns only ID */
+  returnObject?: boolean;
+
+  // Future extensibility
+  /** Enable multiple selection mode */
+  multiple?: boolean;
+
+  // Styling
+  /** Additional CSS classes */
+  class?: string;
+  /** Show the trigger element (for embedded usage) */
+  showTrigger?: boolean;
+
+  // Dynamic Parameters
+  /** Static query parameters to append to endpoint */
+  params?: Record<string, any>;
+  /** Condition parameters formatted as key:value,key2:value2 */
+  condition?: Record<string, any>;
+  /** Order by field for sorting */
+  orderBy?: string;
+  /** Sort direction (asc or desc) */
+  sort?: "asc" | "desc";
+}
+
+// ===== REACTIVE STATE =====
+/** Array of items fetched from the API */
+const data = ref<SelectItem[]>([]);
+/** Currently selected item (single selection mode) */
+const selected = ref<SelectItem | null>(null);
+/** Array of selected items (multiple selection mode) */
+const selectedMultiple = ref<SelectItem[]>([]);
+/** Array of checked items for multiple selection (temporary selections in dialog) */
+const checkeds = ref<SelectItem[]>([]);
+/** Array of checked IDs for multiple selection */
+const checkedIds = ref<(string | number)[]>([]);
+/** Two-way binding model for the component value */
+const model = defineModel<string | number | (string | number)[] | SelectItem[] | null>();
+/** Event emitter for change events */
+const emits = defineEmits(["change"]);
+
+/** Component props with default values */
+const props = withDefaults(defineProps<BaseSelectorProps>(), {
+  placeholder: "Pilih item...",
+  searchColumns: "name",
+  showAvatar: false,
+  returnObject: false,
+  multiple: false,
+  disabled: false,
+  disableAutoLoad: false,
+  autoFillOrg: false,
+  nameField: "",
+  showTrigger: true,
+  params: () => ({}),
+  condition: () => ({}),
+  orderBy: undefined,
+  sort: "asc"
+});
+
+// ===== INTERNAL STATE =====
+/** Current search query */
+const q = ref("");
+/** Pagination metadata for API requests */
+const pageMeta = ref<PageMeta>({ total: 0, limit: 20, page: 1 });
+/** Loading state indicator */
+const loading = ref(true);
+/** Dialog open/close state */
+const dialogOpen = ref(false);
+/** Error message for display */
+const error = ref<string | null>(null);
+
+// ===== PERFORMANCE OPTIMIZATIONS =====
+/** Memory management utilities for cleanup */
+const { addCleanup, cleanup } = useMemoryManagement();
+/** Debounced search function to prevent excessive API calls (300ms timeout as per requirement 8.1) */
+const debouncedSearch = useDebounceSearch((query: string) => {
+  q.value = query;
+  pageMeta.value.page = 1; // Reset to first page on new search
+  getData();
+}, 300);
+
+// ===== COMPUTED PROPERTIES =====
+/** Development mode flag for debugging */
+const IS_DEV = (import.meta as any)?.env?.DEV === true;
+/**
+ * Computed property for avatar background color based on endpoint
+ * Provides visual distinction between different data types
+ */
+const avatarColorClass = computed(() => {
+  const endpointPath = props.endpoint.split("?")[0];
+  // More robust endpoint matching for avatar colors
+  if (endpointPath === "/account" || endpointPath.includes("/account")) {
+    return "bg-green-200";
+  }
+  if (endpointPath === "/organization" || endpointPath.includes("/organization")) {
+    return "bg-blue-200";
+  }
+  // Default color for other endpoints
+  return "bg-gray-200";
+});
+
+/**
+ * Computed property for avatar text color based on endpoint
+ * Ensures proper contrast with background colors
+ */
+const avatarTextColorClass = computed(() => {
+  const endpointPath = props.endpoint.split("?")[0];
+  // More robust endpoint matching for avatar text colors
+  if (endpointPath === "/account" || endpointPath.includes("/account")) {
+    return "text-green-700";
+  }
+  if (endpointPath === "/organization" || endpointPath.includes("/organization")) {
+    return "text-blue-700";
+  }
+  // Default text color for other endpoints
+  return "text-gray-700";
+});
+
+/**
+ * Enhanced display name resolver with comprehensive field parsing
+ * Supports dot notation, template fields, custom functions, and fallbacks
+ *
+ * @param object - The object to extract the display name from
+ * @returns Formatted display name string
+ */
+function getEnhancedDisplayName(object: any): string {
+  if (!object) return "";
+
+  // Priority 1: Use nameFieldFunc if available
+  if (props.nameFieldFunc) {
+    try {
+      const result = props.nameFieldFunc(object);
+      if (result && String(result).trim() !== "" && String(result) !== "undefined") {
+        return String(result);
+      }
+    } catch (error) {
+      if (IS_DEV) console.warn("[BaseSelector] nameFieldFunc error:", error);
+    }
+  }
+
+  // Priority 2: Use nameField with advanced parsing
+  if (props.nameField && props.nameField.trim() !== "") {
+    try {
+      // Handle template fields like "{user.name} - {user.role}"
+      const templateRegex = /\{([a-zA-Z0-9_\.]+)\}/g;
+      if (templateRegex.test(props.nameField)) {
+        return props.nameField.replace(templateRegex, (match, fieldPath) => {
+          const value = getNestedValue(object, fieldPath);
+          return value !== null && value !== undefined ? String(value) : "";
+        });
+      }
+
+      // Handle dot notation like "user.profile.name"
+      if (props.nameField.includes(".")) {
+        const value = getNestedValue(object, props.nameField);
+        if (value !== null && value !== undefined && String(value).trim() !== "") {
+          return String(value);
+        }
+      }
+
+      // Handle simple field name
+      const value = object[props.nameField];
+      if (value !== null && value !== undefined && String(value).trim() !== "") {
+        return String(value);
+      }
+    } catch (error) {
+      if (IS_DEV) console.warn("[BaseSelector] nameField parsing error:", error);
+    }
+  }
+
+  // Priority 3: Common fallback fields
+  const fallbackFields = ["name", "title", "label", "display", "text"];
+  for (const field of fallbackFields) {
+    const value = object[field];
+    if (value !== null && value !== undefined && String(value).trim() !== "") {
+      return String(value);
+    }
+  }
+
+  // Priority 4: ID as last resort
+  if (object.id !== null && object.id !== undefined) {
+    return String(object.id);
+  }
+
+  return "";
+}
+
+/**
+ * Enhanced nested value getter with robust error handling
+ * Supports deep object traversal with dot notation
+ *
+ * @param obj - Object to traverse
+ * @param path - Dot notation path like "user.profile.name"
+ * @returns The nested value or null if not found
+ */
+function getNestedValue(obj: any, path: string): any {
+  if (!obj || !path) return null;
+
+  try {
+    const keys = path.split(".");
+    let current = obj;
+
+    for (const key of keys) {
+      if (current === null || current === undefined) return null;
+      if (typeof current !== "object") return null;
+      current = current[key];
+    }
+
+    return current;
+  } catch (error) {
+    if (IS_DEV) console.warn("[BaseSelector] getNestedValue error:", error);
+    return null;
+  }
+}
+
+/**
+ * Computed property for display text in the selector trigger
+ * Handles both single and multiple selection display logic with enhanced parsing
+ */
+const displayText = computed(() => {
+  // Multiple selection display logic
+  if (props.multiple && selectedMultiple.value.length > 0) {
+    if (selectedMultiple.value.length === 1) {
+      const displayName = getEnhancedDisplayName(selectedMultiple.value[0]);
+      return displayName || props.placeholder;
+    }
+    return `${selectedMultiple.value.length} items selected`;
+  }
+
+  // Single selection display logic
+  if (selected.value) {
+    const displayName = getEnhancedDisplayName(selected.value);
+    return displayName || props.placeholder;
+  }
+
+  return props.placeholder;
+});
+
+/**
+ * Helper function to check if an item is currently selected
+ * Works for both single and multiple selection modes
+ */
+const isItemSelected = (item: SelectItem) => {
+  if (props.multiple) {
+    // For multiple selection, check if item is in the checkedIds array
+    return checkedIds.value.includes(item.id);
+  }
+  return selected.value?.id === item.id;
+};
+
+/**
+ * Select all checkbox status
+ * Returns true if all visible items are selected, false if none, 'indeterminate' if some
+ */
+const checkedAllStatus = ref<boolean | "indeterminate">(false);
+
+// ===== CORE FUNCTIONS =====
+/**
+ * Handles item selection for both single and multiple modes
+ * Emits appropriate change events based on returnObject prop
+ *
+ * @param option - The selected item
+ */
+function selectItem(option: SelectItem) {
+  if (props.multiple) {
+    // Multiple selection mode - toggle selection using checkedIds pattern
+    const checkedIdx = checkedIds.value.indexOf(option.id);
+    if (checkedIdx >= 0) {
+      // Remove if already selected (toggle off)
+      checkeds.value.splice(checkedIdx, 1);
+      checkedIds.value.splice(checkedIdx, 1);
+    } else {
+      // Add if not selected (toggle on)
+      checkeds.value.push(option);
+      checkedIds.value.push(option.id);
+    }
+
+    // Update the selectedMultiple for display purposes
+    selectedMultiple.value = [...checkeds.value];
+
+    // Set model value based on returnObject prop
+    if (props.returnObject) {
+      model.value = selectedMultiple.value;
+    } else {
+      model.value = selectedMultiple.value.map(item => item.id);
+    }
+
+    if (IS_DEV) {
+      console.log("[BaseSelector] selectItem - returnObject:", props.returnObject, "model.value:", model.value);
+    }
+
+    // Refresh checkbox states
+    refreshCheckeds();
+
+    // Emit change event with proper format based on returnObject prop
+    setTimeout(() => {
+      if (props.returnObject) {
+        emits(
+          "change",
+          selectedMultiple.value.map(item => item.id),
+          selectedMultiple.value
+        );
+      } else {
+        emits(
+          "change",
+          selectedMultiple.value.map(item => item.id)
+        );
+      }
+    });
+  } else {
+    // Single selection mode
+    selected.value = option;
+
+    if (props.returnObject) {
+      model.value = option.id;
+      // Emit the full object for returnObject mode (like BaseSelectorSingleAvatar)
+      setTimeout(() => {
+        emits("change", option.id, option);
+      });
+    } else {
+      model.value = option.id;
+      // Emit only the ID for non-returnObject mode (like BaseSelectorSingle)
+      setTimeout(() => {
+        emits("change", option.id);
+      });
+    }
+
+    // Clear search and close dialog after single selection (only for single selection mode)
+    q.value = "";
+    if (!props.multiple) {
+      dialogOpen.value = false;
+    }
+  }
+}
+
+/**
+ * Clears the current selection
+ * Handles both single and multiple selection modes
+ */
+function clearItem() {
+  if (props.disabled) return;
+
+  if (props.multiple) {
+    selectedMultiple.value = [];
+    checkeds.value = [];
+    checkedIds.value = [];
+    model.value = [];
+  } else {
+    selected.value = null;
+    model.value = null;
+  }
+  q.value = ""; // Clear search query
+
+  // Emit change event for clearing with proper format
+  setTimeout(() => {
+    if (props.multiple) {
+      if (props.returnObject) {
+        emits("change", [], []);
+      } else {
+        emits("change", []);
+      }
+    } else {
+      if (props.returnObject) {
+        emits("change", null, null);
+      } else {
+        emits("change", null);
+      }
+    }
+  });
+}
+
+/**
+ * Selects all visible items in multiple selection mode
+ */
+function selectAll() {
+  if (!props.multiple || props.disabled) return;
+
+  if (!checkedAllStatus.value || checkedAllStatus.value === "indeterminate") {
+    // Select all visible items
+    const newSelections = data.value.filter(item => !checkedIds.value.includes(item.id));
+
+    // Add to checkeds and checkedIds
+    checkeds.value = [...checkeds.value, ...newSelections];
+    checkedIds.value = [...checkedIds.value, ...newSelections.map(item => item.id)];
+
+    // Update selectedMultiple for display
+    selectedMultiple.value = [...checkeds.value];
+
+    // Set model value based on returnObject prop
+    if (props.returnObject) {
+      model.value = selectedMultiple.value;
+    } else {
+      model.value = selectedMultiple.value.map(item => item.id);
+    }
+  } else {
+    // Deselect all
+    checkeds.value = [];
+    checkedIds.value = [];
+    selectedMultiple.value = [];
+    model.value = [];
+  }
+
+  // Refresh checkbox states
+  refreshCheckeds();
+
+  // Emit change event
+  setTimeout(() => {
+    if (props.returnObject) {
+      emits(
+        "change",
+        selectedMultiple.value.map(item => item.id),
+        selectedMultiple.value
+      );
+    } else {
+      emits(
+        "change",
+        selectedMultiple.value.map(item => item.id)
+      );
+    }
+  });
+}
+
+/**
+ * Clears all selections in multiple selection mode
+ */
+function clearAllSelections() {
+  if (!props.multiple || props.disabled) return;
+
+  checkeds.value = [];
+  checkedIds.value = [];
+  selectedMultiple.value = [];
+  model.value = [];
+
+  // Refresh checkbox states
+  refreshCheckeds();
+
+  // Emit change event
+  setTimeout(() => {
+    if (props.returnObject) {
+      emits("change", [], []);
+    } else {
+      emits("change", []);
+    }
+  });
+}
+
+/**
+ * Refreshes the isChecked property on data items based on checkedIds
+ * This is essential for proper checkbox state display
+ */
+function refreshCheckeds() {
+  if (!props.multiple) return;
+
+  let checkedAll = true;
+  let notCheckedAll = true;
+
+  data.value.forEach((row: SelectItem) => {
+    row.isChecked = checkedIds.value && checkedIds.value.includes(row.id);
+    if (row.isChecked) notCheckedAll = false;
+    else checkedAll = false;
+  });
+
+  // Update checkedAllStatus
+  if (checkedAll === notCheckedAll) {
+    checkedAllStatus.value = "indeterminate";
+  } else {
+    checkedAllStatus.value = checkedAll;
+  }
+}
+
+/**
+ * Finishes selection and closes dialog in multiple selection mode
+ */
+function finishSelection() {
+  if (!props.multiple) return;
+
+  // Update selectedMultiple with current checkeds
+  selectedMultiple.value = [...checkeds.value];
+
+  // Set model value based on returnObject prop
+  if (props.returnObject) {
+    model.value = selectedMultiple.value;
+  } else {
+    model.value = selectedMultiple.value.map(item => item.id);
+  }
+
+  // Close the dialog
+  dialogOpen.value = false;
+
+  // Emit final change event with current selections
+  setTimeout(() => {
+    if (props.returnObject) {
+      emits(
+        "change",
+        selectedMultiple.value.map(item => item.id),
+        selectedMultiple.value
+      );
+    } else {
+      emits(
+        "change",
+        selectedMultiple.value.map(item => item.id)
+      );
+    }
+  });
+}
+
+/**
+ * Handles pagination navigation
+ * Supports first, previous, next, and last page navigation
+ *
+ * @param type - Navigation type ('first', 'prev', 'next', 'last')
+ */
+function navigate(type: string) {
+  const totalPages = Math.ceil(pageMeta.value.total / pageMeta.value.limit);
+
+  switch (type) {
+    case "first":
+      if (pageMeta.value.page !== 1) {
+        pageMeta.value.page = 1;
+      } else {
+        return; // Already on first page, no need to reload
+      }
+      break;
+    case "prev":
+      if (pageMeta.value.page > 1) {
+        pageMeta.value.page -= 1;
+      } else {
+        return; // Already on first page
+      }
+      break;
+    case "next":
+      if (pageMeta.value.page < totalPages) {
+        pageMeta.value.page += 1;
+      } else {
+        return; // Already on last page
+      }
+      break;
+    case "last":
+      if (pageMeta.value.page !== totalPages && totalPages > 0) {
+        pageMeta.value.page = totalPages;
+      } else {
+        return; // Already on last page or no data
+      }
+      break;
+    default:
+      console.warn("Invalid navigation type:", type);
+      return;
+  }
+  getData(); // Fetch data for the new page
+}
+
+/**
+ * Fetches data from the API endpoint
+ * Handles pagination, search, and error states
+ * Uses the standardized API response format: { data: [], totalData: number }
+ */
+function getData() {
+  loading.value = true;
+  error.value = null;
+
+  // Check if endpoint is defined
+  if (!props.endpoint) {
+    console.error("BaseSelector: endpoint prop is required but not provided");
+    error.value = "No endpoint configured";
+    loading.value = false;
+    return;
+  }
+
+  // Build the API endpoint URL with query parameters
+  const endpoint = props.endpoint.indexOf("?") > 0 ? `${props.endpoint}&` : `${props.endpoint}?`;
+
+  // Add search columns if not already present in endpoint
+  const searchColumns = endpoint.includes("searchColumns") ? "" : `&searchColumns=${props.searchColumns}`;
+
+  // Build dynamic parameters
+  const buildParams = () => {
+    let paramString = "";
+
+    // Add static params
+    if (props.params && Object.keys(props.params).length > 0) {
+      const paramEntries = Object.entries(props.params)
+        .filter(([_, value]) => value !== null && value !== undefined && value !== "")
+        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`);
+      if (paramEntries.length > 0) {
+        paramString += `&${paramEntries.join("&")}`;
+      }
+    }
+
+    // Add condition params
+    if (props.condition && Object.keys(props.condition).length > 0) {
+      const conditionEntries = Object.entries(props.condition)
+        .filter(([_, value]) => value !== null && value !== undefined && value !== "")
+        .map(([key, value]) => `${key}:${encodeURIComponent(value)}`);
+      if (conditionEntries.length > 0) {
+        paramString += `&condition=${conditionEntries.join(",")}`;
+      }
+    }
+
+    // Add orderBy parameter
+    if (props.orderBy) {
+      paramString += `&orderBy=${encodeURIComponent(props.orderBy)}`;
+    }
+
+    // Add sort parameter
+    if (props.sort) {
+      paramString += `&sort=${encodeURIComponent(props.sort)}`;
+    }
+
+    return paramString;
+  };
+
+  // Construct the full URI with pagination, search, and dynamic parameters
+  const uri = `${endpoint}limit=${pageMeta.value.limit}&page=${pageMeta.value.page}&search=${q.value}${searchColumns}${buildParams()}`;
+
+  api
+    .get(uri)
+    .then(r => {
+      // Handle standardized API response format
+      pageMeta.value.total = r.data.totalData || 0;
+      data.value = r.data.data || [];
+      error.value = null;
+
+      // Refresh checkbox states after data is loaded
+      if (props.multiple) {
+        refreshCheckeds();
+      }
+    })
+    .catch(err => {
+      console.error("BaseSelector getData error:", err);
+      // Reset data on error
+      pageMeta.value.total = 0;
+      data.value = [];
+      error.value = err.response?.data?.message || "Failed to load data";
+
+      // Show error toast for user feedback (except for auth errors)
+      if (err.response?.status !== 401 && error.value) {
+        toast.error(error.value);
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/**
+ * Handles search input with debouncing
+ * Uses the optimized debounced search function to prevent excessive API calls
+ *
+ * @param query - Search query string
+ */
+function searchItem(query: string) {
+  debouncedSearch(query);
+}
+
+function parsedDescription(object: SelectItem) {
+  if (!object || !props.descriptionField) return object?.description || "";
+
+  try {
+    const regex = /\{([a-zA-Z0-9_]+)\}/g;
+
+    if (regex.test(props.descriptionField)) {
+      return props.descriptionField.replace(regex, (_: any, fieldName: any) => {
+        if (fieldName.includes(".")) {
+          const fields = fieldName.split(".");
+          let value: any = object;
+          for (const field of fields) {
+            if (value && typeof value === "object") {
+              value = value[field];
+            } else {
+              return "";
+            }
+          }
+          return value || "";
+        }
+        return (object as any)[fieldName] || "";
+      });
+    }
+
+    if (props.descriptionField?.includes(".")) {
+      const fields = props.descriptionField.split(".");
+      let value: any = object;
+      for (const field of fields) {
+        if (value && typeof value === "object") {
+          value = value[field];
+        } else {
+          return "";
+        }
+      }
+      return value || "";
+    }
+
+    return (object as any)[props.descriptionField] || "";
+  } catch (error) {
+    console.warn("Error parsing description field:", error);
+    return object?.description || "";
+  }
+}
+
+function parsedField(object: SelectItem) {
+  return getEnhancedDisplayName(object);
+}
+
+function triggerClicked() {
+  if (props.disabled) return;
+
+  // Initialize checked state for multiple selection
+  if (props.multiple) {
+    checkeds.value = [...selectedMultiple.value];
+    checkedIds.value = selectedMultiple.value.map(item => item.id);
+  }
+
+  // Clear any pending search timeout (handled by debounced search utility)
+  q.value = "";
+  pageMeta.value.page = 1; // Reset page to 1 when opening dialog
+  error.value = null; // Clear any previous errors
+  dialogOpen.value = true;
+
+  if (props.disableAutoLoad) {
+    getData(); // Load fresh data with empty search
+  } else {
+    getData(); // Always refresh data when opening dialog
+  }
+}
+
+watch(model, (newVal, oldVal) => {
+  // Avoid infinite loops
+  if (newVal === oldVal) return;
+  if (!model.value && !newVal) return;
+
+  if (props.multiple) {
+    // Handle multiple selection mode
+    if (Array.isArray(newVal)) {
+      // Check if it's an array of IDs or array of objects
+      if (newVal.length > 0 && typeof newVal[0] === "object") {
+        // Array of objects (returnObject = true)
+        selectedMultiple.value = newVal as SelectItem[];
+        checkeds.value = [...selectedMultiple.value];
+        checkedIds.value = selectedMultiple.value.map(item => item.id);
+      } else {
+        // Array of IDs (returnObject = false) - need to fetch objects for display
+        checkedIds.value = newVal as (string | number)[];
+        // Keep selectedMultiple as is for display purposes, will be updated on data fetch
+      }
+    } else if (!newVal) {
+      selectedMultiple.value = [];
+      checkeds.value = [];
+      checkedIds.value = [];
+    }
+  } else {
+    // Handle single selection mode
+    if (newVal && typeof newVal === "string" && model.value === newVal) return;
+
+    if (newVal && typeof newVal === "object" && (newVal as any).length > 0) {
+      selected.value = (newVal as any)[0] as SelectItem;
+      model.value = selected.value ? selected.value.id : null;
+    } else if (!newVal) {
+      selected.value = null;
+      model.value = null;
+    }
+  }
+
+  // Emit change event with proper delay to avoid race conditions
+  setTimeout(() => {
+    if (props.multiple) {
+      if (props.returnObject) {
+        emits(
+          "change",
+          selectedMultiple.value.map(item => item.id),
+          selectedMultiple.value
+        );
+      } else {
+        emits(
+          "change",
+          selectedMultiple.value.map(item => item.id)
+        );
+      }
+    } else {
+      if (typeof model.value === "string" || typeof model.value === "number" || model.value === null) {
+        if (props.returnObject) {
+          emits("change", model.value, selected.value);
+        } else {
+          emits("change", model.value);
+        }
+      }
+    }
+  }, 0);
+});
+
+// Watch dialog open state to ensure search is reset
+watch(dialogOpen, newValue => {
+  if (newValue) {
+    // Ensure search query is reset when dialog opens
+    q.value = "";
+    pageMeta.value.page = 1;
+  }
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    if (model.value) {
+      if ((typeof model.value === "string" || typeof model.value === "number") && (!selected.value || (selected.value && selected.value.id !== model.value))) {
+        const detailUri = props.endpoint.split("?")[0];
+        api
+          .get(`${detailUri}/${model.value}`)
+          .then(r => {
+            selected.value = r.data.data as SelectItem;
+            model.value = selected.value ? selected.value.id : null;
+          })
+          .catch(err => {
+            console.error("Failed to load selected item details:", err);
+            // Don't show toast for this error as it might be expected in some cases
+          });
+        return;
+      }
+
+      if (typeof model.value === "object" && (model.value as any).length > 0) {
+        selected.value = (model.value as any)[0] as SelectItem;
+        model.value = selected.value ? selected.value.id : null;
+      }
+    }
+  }, 0);
+
+  // Auto fill organization functionality (from BaseSelectorSingleAvatar)
+  if (props.autoFillOrg) {
+    api
+      .get("/organization/my")
+      .then(r => {
+        // Enhanced accessLevel filtering and validation
+        const orgData = r.data.data;
+        if (!props.accessLevel) {
+          // No access level restriction, auto-fill with organization
+          selectItem(orgData);
+        } else if (orgData.accessLevel && props.accessLevel === orgData.accessLevel.code) {
+          // Access level matches, auto-fill with organization
+          selectItem(orgData);
+        } else {
+          // Access level doesn't match, don't auto-fill but don't show error
+          console.info("Organization access level does not match required level:", {
+            required: props.accessLevel,
+            actual: orgData.accessLevel?.code
+          });
+        }
+      })
+      .catch(err => {
+        console.error("Auto fill organization failed:", err);
+        // Only show error toast if it's not a 401/403 (auth) error
+        if (err.response?.status !== 401 && err.response?.status !== 403) {
+          toast.error("Get my organization failed!");
+        }
+      });
+  }
+
+  if (!props.disableAutoLoad) getData();
+});
+
+// Cleanup on component unmount (performance optimization)
+onUnmounted(() => {
+  cleanup();
+});
+</script>
+
+<template>
+  <div class="relative w-full items-center" :class="{ '!cursor-default': props.disabled }" v-if="props.showTrigger !== false">
+    <div
+      :class="[
+        cn(
+          'form-input-group group flex min-h-0 w-full flex-1 cursor-pointer border-solid transition-input duration-200 form-radius-input-lg form-color-input form-bg-input form-shadow-input form-border-width-input form-border-color-input hover:form-color-input-hover hover:form-bg-input-hover hover:form-border-color-input-hover hover:form-shadow-input-hover focused:form-color-input-focus focused:form-bg-input-focus focused:form-border-color-input-focus focused:form-ring focused:form-shadow-input-focus focused-hover:form-shadow-input-hover',
+          props.class,
+          { '!cursor-default !bg-gray-100 form-bg-disabled': props.disabled }
+        )
+      ]"
+      v-on:click="triggerClicked">
+      <div
+        class="w-full border-0 bg-transparent form-text-lg form-radius-input-lg form-color-input form-autofill-default form-p-input-lg group-hover:form-color-input-hover with-floating:form-p-input-floating-lg"
+        :class="{ '': selected }">
+        <div class="text-left" v-if="(multiple && selectedMultiple.length > 0) || (!multiple && selected && model)">
+          <!-- Avatar display when showAvatar is true -->
+          <template v-if="showAvatar && !multiple">
+            <Avatar class="absolute left-2 top-1/2 -mt-3.5 size-7" :class="avatarColorClass">
+              <AvatarImage v-if="selected?.avatar" :src="selected.avatar" />
+              <AvatarFallback class="text-sm font-medium" :class="avatarTextColorClass">
+                {{ selected?.name?.substring(0, 1).toUpperCase() || "?" }}
+              </AvatarFallback>
+            </Avatar>
+            <div class="my-auto w-full pl-8 pr-7">
+              <div class="overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+                {{ displayText }}
+              </div>
+            </div>
+          </template>
+          <!-- Multiple selection display with avatar -->
+          <template v-else-if="showAvatar && multiple">
+            <div class="flex items-center gap-1 pl-2 pr-7">
+              <div class="flex -space-x-1" v-if="selectedMultiple.length <= 3">
+                <Avatar v-for="item in selectedMultiple.slice(0, 3)" :key="item.id" class="size-6 border-2 border-white" :class="avatarColorClass">
+                  <AvatarImage v-if="item.avatar" :src="item.avatar" />
+                  <AvatarFallback class="text-xs font-medium" :class="avatarTextColorClass">
+                    {{ item.name.substring(0, 1).toUpperCase() }}
+                  </AvatarFallback>
+                </Avatar>
+              </div>
+              <Avatar v-else class="size-6" :class="avatarColorClass">
+                <AvatarFallback class="text-xs font-medium" :class="avatarTextColorClass">
+                  {{ selectedMultiple.length }}
+                </AvatarFallback>
+              </Avatar>
+              <div class="ml-2 overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+                {{ displayText }}
+              </div>
+            </div>
+          </template>
+          <!-- Regular display when showAvatar is false -->
+          <template v-else>
+            <div class="max-w-full pr-10">
+              <div class="group relative w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+                <div v-if="props.nameFieldFunc && !multiple && selected" class="overflow-hidden text-ellipsis whitespace-nowrap" v-html="props.nameFieldFunc(selected)"></div>
+                <template v-else>
+                  {{ displayText }}
+                  <div class="absolute left-0 top-full hidden rounded-sm bg-black/75 px-1.5 pb-0.5 pt-0.5 text-[11px] font-normal leading-snug text-white group-hover:block">
+                    {{ displayText }}
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div class="text-left text-gray-400 dark:text-gray-500" v-else>
+          {{ props.placeholder }}
+        </div>
+      </div>
+    </div>
+    <span class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-slate-400 dark:text-slate-500" v-if="!props.disabled">
+      <BtnCircle
+        class="mr-1 h-6 w-6 cursor-pointer bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600"
+        :class="{ '!size-6': showAvatar }"
+        v-on:click.stop="clearItem"
+        v-if="(multiple && selectedMultiple.length > 0) || (!multiple && selected && model)">
+        <LucideX :size="14"></LucideX>
+      </BtnCircle>
+      <ChevronRight v-else />
+    </span>
+  </div>
+
+  <DialogSelect
+    :options="data"
+    @select="selectItem"
+    @search="searchItem"
+    @select-all="selectAll"
+    @clear-selections="clearAllSelections"
+    @finish-selection="finishSelection"
+    :loading="loading"
+    :page-meta="pageMeta"
+    @navigate="navigate"
+    :show-trigger="false"
+    v-model:open="dialogOpen"
+    option-attribute="name"
+    value-attribute="id"
+    description-attribute="description"
+    :display-search="true"
+    :display-pagination="true"
+    :select-all-loading="false"
+    :mutiple="multiple"
+    :selected-count="checkeds.length"
+    :checked-all-status="checkedAllStatus">
+    <template #option="{ option }">
+      <!-- Avatar option display when showAvatar is true -->
+      <div
+        v-if="showAvatar"
+        class="flex flex-row items-start gap-3 rounded-md px-6 py-2"
+        :class="{
+          'bg-slate-200 dark:bg-dark_bg3': option.isChecked,
+          'bg-blue-50': multiple && option.isChecked
+        }">
+        <Avatar class="size-9" :class="avatarColorClass">
+          <AvatarImage v-if="option.avatar" :src="option.avatar" />
+          <AvatarFallback class="text-sm font-semibold" :class="avatarTextColorClass">
+            {{ option.name.substring(0, 1).toUpperCase() }}
+          </AvatarFallback>
+        </Avatar>
+        <div class="my-auto flex-1">
+          <div class="break-words font-semibold leading-[1.25]">{{ parsedField(option) || option.name || option.id }}</div>
+          <div class="text-[13px] font-normal text-gray-500 dark:text-gray-400" v-if="props.condition?.levels">
+            {{ option.accessLevel.name }}
+          </div>
+        </div>
+        <!-- Checkbox for multiple selection -->
+        <div v-if="multiple" class="flex items-center" @click.stop="selectItem(option)">
+          <CheckboxElement :checked="option.isChecked" class="mt-1.5" />
+        </div>
+      </div>
+      <!-- Regular option display when showAvatar is false -->
+      <div
+        v-else
+        class="flex items-center rounded-md px-6 py-2"
+        :class="{
+          'bg-slate-200 dark:bg-dark_bg3': option.isChecked,
+          'bg-blue-50': multiple && option.isChecked
+        }">
+        <div class="my-auto flex w-full flex-1 flex-col">
+          <div class="font-semibold">
+            <div v-if="props.nameFieldFunc" v-html="props.nameFieldFunc(option)"></div>
+            <template v-else>
+              {{ parsedField(option) || option.name || option.id }}
+            </template>
+          </div>
+          <div class="-mt-[2px] w-full text-sm font-normal text-gray-500 dark:text-gray-400">
+            <div v-if="props.descriptionFieldFunc" v-html="props.descriptionFieldFunc(option)"></div>
+            <template v-else-if="parsedDescription(option)">
+              {{ parsedDescription(option) }}
+            </template>
+          </div>
+        </div>
+        <!-- Checkbox for multiple selection -->
+        <div v-if="multiple" class="ml-2 flex items-center" @click.stop="selectItem(option)">
+          <CheckboxElement :checked="option.isChecked" class="mt-1.5" />
+        </div>
+      </div>
+    </template>
+    <template #title>
+      {{ props.title }}
+    </template>
+  </DialogSelect>
+</template>