@dasidev/dasi-ui 1.0.0

package/src/lib/performance.utils.ts

@@ -0,0 +1,302 @@
+/**
+ * Performance optimization utilities for the Vue Form Builder Framework
+ * Maintains all existing performance patterns while adding enhancements
+ */
+
+import { ref, computed, watch, type Ref } from 'vue'
+
+/**
+ * Debounced search implementation with 300ms timeout (Requirement 8.1)
+ * Preserves existing search patterns from BaseSelector
+ */
+export function useDebounceSearch(callback: (query: string) => void, delay: number = 300) {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  
+  return (query: string) => {
+    // Clear existing timeout
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+    
+    // Set new timeout with specified delay
+    timeoutId = setTimeout(() => {
+      callback(query)
+    }, delay)
+  }
+}
+
+/**
+ * Column visibility persistence with configurable keys (Requirement 8.3)
+ * Preserves existing localStorage patterns from PageContentTable
+ */
+export interface StorageConfig {
+  keyPrefix?: string
+  keyGenerator?: (endpoint: string, type: string) => string
+}
+
+export function useColumnVisibility(
+  columns: Ref<any[]>, 
+  endpoint: string, 
+  storageConfig?: StorageConfig
+) {
+  const getStorageKey = (type: string): string => {
+    // Use custom storage key generator if provided
+    if (storageConfig?.keyGenerator) {
+      return storageConfig.keyGenerator(endpoint, type)
+    }
+
+    // Use custom key prefix if provided
+    if (storageConfig?.keyPrefix) {
+      return `${storageConfig.keyPrefix}.${type}`
+    }
+
+    // Default behavior (backward compatible)
+    let pageId = endpoint
+    if (!pageId.startsWith("/")) pageId = "/" + pageId
+    pageId = pageId.replace(/[^a-zA-Z0-9_]/g, "_")
+    return `dasi.column_visibility.${pageId}`
+  }
+
+  const saveColumnsFilter = () => {
+    const dataToSave: any[] = []
+    for (const item of columns.value) {
+      if (item.type === "action") continue
+      dataToSave.push({
+        key: item.key,
+        visible: item.showInTable
+      })
+    }
+    const dataStr = JSON.stringify(dataToSave)
+    if (!dataStr) return
+    localStorage.setItem(getStorageKey('column_visibility'), dataStr)
+  }
+
+  const restoreColumnsFilter = () => {
+    const dataStr = localStorage.getItem(getStorageKey('column_visibility'))
+    if (!dataStr) return
+    try {
+      const colJsonData = JSON.parse(dataStr)
+      for (const item of colJsonData ?? []) {
+        for (const column of columns.value) {
+          if (item.key === column.key) {
+            column.visible = !!item.showInTable
+            break
+          }
+        }
+      }
+    } catch (err) {
+      console.error("Failed to parse columns visibility data", err)
+    }
+  }
+
+  return {
+    saveColumnsFilter,
+    restoreColumnsFilter,
+    getStorageKey
+  }
+}
+
+/**
+ * Selective update patterns for efficient data updates (Requirement 8.2)
+ * Preserves existing reloadDataByIds pattern
+ */
+export function useSelectiveUpdates() {
+  const updateItemsById = (
+    currentData: any[], 
+    newData: any[], 
+    ids: (string | number)[]
+  ): any[] => {
+    // Create a copy to avoid mutating original array
+    const updatedData = [...currentData]
+    
+    ids.forEach(id => {
+      const newItem = newData.find((item: any) => item.id === id)
+      if (newItem) {
+        const index = updatedData.findIndex(item => item.id === id)
+        if (index >= 0) {
+          updatedData[index] = { ...newItem }
+        }
+      }
+    })
+    
+    return updatedData
+  }
+
+  const updateSingleItem = (currentData: any[], updatedItem: any): any[] => {
+    const index = currentData.findIndex(item => item.id === updatedItem.id)
+    if (index >= 0) {
+      const newData = [...currentData]
+      newData[index] = { ...updatedItem }
+      return newData
+    }
+    return currentData
+  }
+
+  const removeItemsById = (currentData: any[], ids: (string | number)[]): any[] => {
+    return currentData.filter(item => !ids.includes(item.id))
+  }
+
+  const addItems = (currentData: any[], newItems: any[]): any[] => {
+    return [...currentData, ...newItems]
+  }
+
+  return {
+    updateItemsById,
+    updateSingleItem,
+    removeItemsById,
+    addItems
+  }
+}
+
+/**
+ * Pagination and loading patterns (Requirement 8.4)
+ * Preserves existing pagination patterns
+ */
+export interface PaginationState {
+  currentPage: number
+  itemsPerPage: number
+  totalData: number
+  loading: boolean
+}
+
+export function usePagination(initialState: Partial<PaginationState> = {}) {
+  const state = ref<PaginationState>({
+    currentPage: 1,
+    itemsPerPage: 25,
+    totalData: 0,
+    loading: false,
+    ...initialState
+  })
+
+  const totalPages = ref(0)
+
+  const updateTotalPages = () => {
+    totalPages.value = Math.ceil(state.value.totalData / state.value.itemsPerPage)
+  }
+
+  const goToPage = (page: number) => {
+    if (page >= 1 && page <= totalPages.value) {
+      state.value.currentPage = page
+      return true
+    }
+    return false
+  }
+
+  const nextPage = () => {
+    return goToPage(state.value.currentPage + 1)
+  }
+
+  const prevPage = () => {
+    return goToPage(state.value.currentPage - 1)
+  }
+
+  const firstPage = () => {
+    return goToPage(1)
+  }
+
+  const lastPage = () => {
+    return goToPage(totalPages.value)
+  }
+
+  const setItemsPerPage = (items: number) => {
+    state.value.itemsPerPage = items
+    state.value.currentPage = 1 // Reset to first page
+    updateTotalPages()
+  }
+
+  const setTotalData = (total: number) => {
+    state.value.totalData = total
+    updateTotalPages()
+  }
+
+  const setLoading = (loading: boolean) => {
+    state.value.loading = loading
+  }
+
+  return {
+    state,
+    totalPages,
+    updateTotalPages,
+    goToPage,
+    nextPage,
+    prevPage,
+    firstPage,
+    lastPage,
+    setItemsPerPage,
+    setTotalData,
+    setLoading
+  }
+}
+
+/**
+ * Vue 3 reactivity optimizations (Requirement 8.5)
+ * Provides utilities for optimal reactivity patterns
+ */
+export function useReactivityOptimizations() {
+  // Shallow ref for large arrays to improve performance
+  const createShallowDataRef = <T>(initialValue: T[] = []) => {
+    return ref<T[]>(initialValue)
+  }
+
+  // Computed with proper dependency tracking
+  const createMemoizedComputed = <T>(getter: () => T) => {
+    return computed(() => getter())
+  }
+
+  // Debounced reactive updates
+  const createDebouncedRef = <T>(initialValue: T, delay: number = 300) => {
+    const immediate = ref(initialValue)
+    const debounced = ref(initialValue)
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+    watch(immediate, (newValue) => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+      timeoutId = setTimeout(() => {
+        debounced.value = newValue
+      }, delay)
+    }, { immediate: false })
+
+    return {
+      immediate,
+      debounced,
+      setValue: (value: T) => {
+        immediate.value = value
+      }
+    }
+  }
+
+  return {
+    createShallowDataRef,
+    createMemoizedComputed,
+    createDebouncedRef
+  }
+}
+
+/**
+ * Memory management utilities
+ */
+export function useMemoryManagement() {
+  const cleanupCallbacks: (() => void)[] = []
+
+  const addCleanup = (callback: () => void) => {
+    cleanupCallbacks.push(callback)
+  }
+
+  const cleanup = () => {
+    cleanupCallbacks.forEach(callback => {
+      try {
+        callback()
+      } catch (error) {
+        console.error('Error during cleanup:', error)
+      }
+    })
+    cleanupCallbacks.length = 0
+  }
+
+  return {
+    addCleanup,
+    cleanup
+  }
+}

package/src/lib/tablerow.utils.ts

@@ -0,0 +1,51 @@
+/**
+ * Generic function to render status badge HTML
+ * @param item - The data item
+ * @param field - The field name to check (default: 'status')
+ * @param statusMap - Optional map of status values to badge configs { value: { color, bg, border } }
+ */
+export function renderStatusBadge(item: any, field: string = 'status', statusMap?: Record<string, { color: string; bg: string; border: string }>): string {
+  if (!item) return '';
+  const status = item[field];
+  if (!status) return status || 'Unknown';
+
+  // Use custom status map if provided
+  if (statusMap && statusMap[status]) {
+    const config = statusMap[status];
+    return `<div class="inline-block ${config.bg} ${config.border} ${config.color} font-medium text-xs px-1.5 py-[1px] rounded-full border">${status}</div>`;
+  }
+
+  // Default color mapping
+  const defaultColors: Record<string, { color: string; bg: string; border: string }> = {
+    'CIF': { color: 'text-orange-500', bg: 'bg-orange-100', border: 'border-orange-300' },
+    'FOB': { color: 'text-red-500', bg: 'bg-red-100', border: 'border-red-300' },
+    'CFR': { color: 'text-blue-500', bg: 'bg-blue-100', border: 'border-blue-300' },
+    'TRANS': { color: 'text-green-500', bg: 'bg-green-100', border: 'border-green-300' },
+    'Active': { color: 'text-green-500', bg: 'bg-green-100', border: 'border-green-300' },
+    'Inactive': { color: 'text-gray-500', bg: 'bg-gray-100', border: 'border-gray-300' },
+    'Pending': { color: 'text-yellow-500', bg: 'bg-yellow-100', border: 'border-yellow-300' },
+  };
+
+  const config = defaultColors[status] || { color: 'text-gray-500', bg: 'bg-gray-100', border: 'border-gray-300' };
+  return `<div class="inline-block ${config.bg} ${config.border} ${config.color} font-medium text-xs px-1.5 py-[1px] rounded-full border">${status}</div>`;
+}
+
+/**
+ * Generic function to render nested object name with optional secondary object
+ * @param item - The data item
+ * @param primaryKey - Key for primary object (e.g., 'vehicle')
+ * @param secondaryKey - Optional key for secondary object (e.g., 'trailer')
+ * @param namePath - Path to name field in nested object (e.g., 'details.name' or 'name')
+ */
+export function renderNestedObjectName(item: any, primaryKey: string, secondaryKey?: string, namePath: string = 'name'): string {
+  if (!item) return '-';
+  
+  const getNestedValue = (obj: any, path: string): string => {
+    return path.split('.').reduce((current: any, key: string) => current?.[key], obj) || '-';
+  };
+
+  const primary = getNestedValue(item[primaryKey], namePath);
+  const secondary = secondaryKey ? getNestedValue(item[secondaryKey], namePath) : null;
+  
+  return secondary ? `${primary} / ${secondary}` : primary;
+}