pgo-uiux2 1.0.0

package/src/components/pgo/Search copy.vue

@@ -0,0 +1,310 @@
+<template>
+  <InputSearch
+    v-bind="searchProps"
+    v-on="$attrs"
+    @update:modelValue="handleModelUpdate"
+    @update:searchInput="handleSearchInputUpdate"
+    @input="handleInputEvent"
+    @change="handleChangeEvent"
+    @focus="handleFocusEvent"
+    @blur="handleBlurEvent"
+    @select="handleSelectEvent"
+    @clear="handleClearEvent"
+    @search="handleSearchEvent"
+  >
+    <!-- Forward all named slots -->
+    <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </InputSearch>  
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject  } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import InputSearch from './InputSearch.vue'
+
+const props = defineProps({
+  modelValue: { type: [String, Number, Object], default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: 'Search...' },
+  hint: { type: String, default: '' },
+  error: { type: String, default: '' },
+  errorMessages: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  loading: { type: Boolean, default: false },
+  hidePrependIcon: { type: Boolean, default: false },
+  
+  // Items & Search
+  items: { type: Array, default: () => [] },
+  itemText: { type: [String, Function], default: 'text' },
+  itemValue: { type: [String, Function], default: 'value' },
+  returnObject: { type: Boolean, default: false },
+  
+  // Search behavior
+  searchInput: { type: String, default: '' },
+  filterKeys: { type: Array, default: () => [] },
+  customFilter: { type: Function, default: null },
+  minSearchLength: { type: Number, default: 0 },
+  debounce: { type: Number, default: 300 },
+  
+  // Appearance
+  variant: { type: String, default: 'outlined' },
+  size: { type: String, default: 'md' },
+  containerClass: { type: String, default: '' },
+  id: { type: String, default: '' },
+  
+  // Menu
+  menuMaxHeight: { type: String, default: '300px' },
+  menuWidth: { type: String, default: 'auto' },
+
+  // URL Integration
+  syncWithUrl: { type: Boolean, default: false },
+  urlParam: { type: String, default: 'search' },
+  updateHistory: { type: Boolean, default: true }, // true = pushState, false = replaceState
+  preserveOtherParams: { type: Boolean, default: true },
+})
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:searchInput',
+  'input', 
+  'change', 
+  'focus', 
+  'blur',
+  'select',
+  'clear',
+  'search',
+  'url-updated'
+])
+
+const route = useRoute()
+const router = useRouter()
+
+const inputRef = ref(null)
+const localValue = ref('')
+let debounceTimeout = null
+
+// Initialize local value from URL or props
+const initializeValue = () => {
+  if (props.syncWithUrl && route.query[props.urlParam]) {
+    const urlValue = route.query[props.urlParam]
+    localValue.value = urlValue
+    emit('update:modelValue', urlValue)
+    emit('update:searchInput', urlValue)
+  } else if (props.modelValue) {
+    if (props.returnObject) {
+      localValue.value = getItemText(props.modelValue)
+    } else {
+      localValue.value = props.modelValue
+    }
+  } else if (props.searchInput) {
+    localValue.value = props.searchInput
+  }
+}
+
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newVal) => {
+  if (props.returnObject) {
+    localValue.value = newVal ? getItemText(newVal) : ''
+  } else {
+    localValue.value = newVal || ''
+  }
+})
+
+// Watch for searchInput changes
+watch(() => props.searchInput, (newVal) => {
+  if (newVal !== localValue.value) {
+    localValue.value = newVal
+  }
+})
+
+// Watch URL changes if syncWithUrl is enabled
+watch(() => route.query[props.urlParam], (newVal) => {
+  if (props.syncWithUrl && newVal !== localValue.value) {
+    localValue.value = newVal || ''
+    emit('update:modelValue', newVal || '')
+    emit('update:searchInput', newVal || '')
+  }
+})
+
+// Update URL with search value
+const updateUrl = (value) => {
+  if (!props.syncWithUrl) return
+
+  const query = props.preserveOtherParams 
+    ? { ...route.query } 
+    : {}
+
+  if (value) {
+    query[props.urlParam] = value
+  } else {
+    delete query[props.urlParam]
+  }
+
+  const method = props.updateHistory ? 'push' : 'replace'
+  
+  router[method]({
+    path: route.path,
+    query: query
+  }).catch(() => {}) // Ignore navigation duplicates
+
+  emit('url-updated', query)
+}
+
+// Get item text
+const getItemText = (item) => {
+  if (!item) return ''
+  if (typeof item === 'string' || typeof item === 'number') return item.toString()
+  if (typeof props.itemText === 'function') return props.itemText(item)
+  return item[props.itemText] || ''
+}
+
+// Get item value
+const getItemValue = (item) => {
+  if (!item) return ''
+  if (typeof item === 'string' || typeof item === 'number') return item
+  if (typeof props.itemValue === 'function') return props.itemValue(item)
+  return item[props.itemValue] || item
+}
+
+// Build search props to pass to InputSearch
+const searchProps = computed(() => ({
+  modelValue: localValue.value,
+  label: props.label,
+  placeholder: props.placeholder,
+  hint: props.hint,
+  error: props.error,
+  errorMessages: props.errorMessages,
+  disabled: props.disabled,
+  readonly: props.readonly,
+  required: props.required,
+  clearable: props.clearable,
+  loading: props.loading,
+  hidePrependIcon: props.hidePrependIcon,
+  items: props.items,
+  itemText: props.itemText,
+  itemValue: props.itemValue,
+  returnObject: props.returnObject,
+  searchInput: props.searchInput,
+  filterKeys: props.filterKeys,
+  customFilter: props.customFilter,
+  minSearchLength: props.minSearchLength,
+  debounce: props.debounce,
+  variant: props.variant,
+  size: props.size,
+  containerClass: props.containerClass,
+  id: props.id,
+  menuMaxHeight: props.menuMaxHeight,
+  menuWidth: props.menuWidth,
+}))
+
+// Event handlers
+const handleModelUpdate = (value) => {
+  localValue.value = value
+  emit('update:modelValue', value)
+  
+  if (props.syncWithUrl) {
+    clearTimeout(debounceTimeout)
+    debounceTimeout = setTimeout(() => {
+      updateUrl(value)
+    }, props.debounce)
+  }
+}
+
+const handleSearchInputUpdate = (value) => {
+  emit('update:searchInput', value)
+}
+
+const handleInputEvent = (value) => {
+  emit('input', value)
+}
+
+const handleChangeEvent = (value) => {
+  emit('change', value)
+}
+
+const handleFocusEvent = (event) => {
+  emit('focus', event)
+}
+
+const handleBlurEvent = (event) => {
+  emit('blur', event)
+}
+
+const handleSelectEvent = (item) => {
+  const value = props.returnObject ? item : getItemValue(item)
+  const text = getItemText(item)
+  
+  localValue.value = text
+  emit('update:modelValue', value)
+  emit('update:searchInput', text)
+  emit('select', item)
+  
+  if (props.syncWithUrl) {
+    updateUrl(text)
+  }
+}
+
+const handleClearEvent = () => {
+  localValue.value = ''
+  emit('update:modelValue', '')
+  emit('update:searchInput', '')
+  emit('clear')
+  
+  if (props.syncWithUrl) {
+    updateUrl('')
+  }
+}
+
+const handleSearchEvent = (value) => {
+  emit('search', value)
+}
+
+// Public methods
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+const clear = () => {
+  handleClearEvent()
+}
+
+const getUrlParams = () => {
+  return route.query[props.urlParam] || ''
+}
+
+const setUrlParam = (value) => {
+  updateUrl(value)
+}
+
+// Lifecycle
+onMounted(() => {
+  initializeValue()
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(debounceTimeout)
+})
+
+// Expose methods
+defineExpose({ 
+  focus, 
+  clear,
+  getUrlParams,
+  setUrlParam
+})
+</script>
+
+<style scoped>
+/* Remove default search input styling */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+</style>

package/src/components/pgo/Search.vue

@@ -0,0 +1,411 @@
+<template>
+  <div 
+    ref="containerRef"
+    :class="['relative', containerClass, width]"
+    v-on-click-outside="handleClickOutside"
+  >
+    <Base
+        :model-value="localValue"
+        :label="label"
+        v-on="$attrs"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :error="!!error || errorMessages.length > 0"
+        :error-messages="errorMessages"
+        :clearable="clearable && !loading"
+        :size="size"
+        :id="inputId"
+        :prepend="prepend"
+        :append="append"
+        :is-open="showResults"
+        @click:clear="clear"
+        :bg="bg"
+        :border="border"
+        :text-color="textColor"
+        :rounded="rounded"
+        :dir="computedDir" 
+        :lang="computedLang"
+        :width="width"
+    >
+      <template #control="{ attrs, events }">
+        <input
+          ref="inputRef"
+          v-bind="attrs"
+          type="search"
+          :value="localValue"
+           :placeholder="isFocused && !localValue ? placeholder : ''"
+          :class="inputClasses"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown.enter="handleEnter"
+          @keydown.esc="handleEscape"
+          @keydown.down="handleArrowDown"
+          @keydown.up="handleArrowUp"
+        />
+      </template>
+
+      <!-- Loading spinner in append slot -->
+      <template v-if="loading" #append>
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </template>
+
+      <!-- Magnifying glass icon when not loading -->
+      <!-- <template v-else #append>
+        <HeroIcon name="magnifying-glass" :size="iconSizes[size]" />
+      </template> -->
+    </Base>
+
+    <!-- Results Dropdown - Styled like Select component -->
+    <Transition name="fade">
+      <div
+        v-if="showResults"
+        ref="menuRef"
+        :class="[
+          'absolute left-0 right-0 mt-1 shadow-lg z-50',
+          bg,
+          border ? 'border ' + border : '',
+          rounded ? roundedMap[rounded] : '',
+          menuClass
+        ]"
+        :style="menuStyle"
+      >
+        <ul class="max-h-60 overflow-auto py-1">
+          <!-- Loading State -->
+          <li v-if="loading" class="px-4 py-2 text-input-text text-center text-sm">
+            <slot name="loading">
+              <div class="flex items-center gap-2 justify-center">
+                <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Searching...
+              </div>
+            </slot>
+          </li>
+
+          <!-- No Data -->
+          <li v-else-if="filteredItems.length === 0" class="px-4 py-2 text-input-text text-center text-sm">
+            <slot name="noData">No results found</slot>
+          </li>
+
+          <!-- Results List -->
+          <li
+            v-else
+            v-for="(item, index) in filteredItems"
+            :key="getItemValue(item)"
+            @click="selectItem(item)"
+            @mouseenter="highlightedIndex = index"
+            :class="[
+              'px-4 py-2 cursor-pointer transition flex items-center text-sm',
+              highlightedIndex === index
+                ? 'bg-gray-100 text-gray-900'
+                : 'hover:bg-input-hover',
+              itemClass,
+              itemHoverClass
+            ]"
+            role="option"
+            :aria-selected="highlightedIndex === index"
+          >
+            <slot name="item" :item="item" :index="index">
+              <span class="flex-1">{{ getItemText(item) }}</span>
+            </slot>
+          </li>
+        </ul>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, inject } from 'vue'
+import Base from '../pgo/base/Base.vue'
+import HeroIcon from '../pgo/HeroIcon.vue'
+import { vOnClickOutside } from '@vueuse/components'
+import { roundedMap, sizes, iconSizes } from '../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+    modelValue: { type: [String, Number, Object], default: '' },
+    label: { type: [String, Object], default: '' },
+    placeholder: { type: String, default: 'Search...' },
+    hint: { type: String, default: '' },
+    error: { type: String, default: '' },
+    errorMessages: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    prepend: { type: String, default: '' },
+    append: { type: String, default: '' },
+    
+    // Items & Search
+    items: { type: Array, default: () => [] },
+    itemText: { type: [String, Function], default: 'text' },
+    itemValue: { type: [String, Function], default: 'value' },
+    returnObject: { type: Boolean, default: false },
+    
+    // Search behavior
+    searchInput: { type: String, default: '' },
+    filterKeys: { type: Array, default: () => [] },
+    customFilter: { type: Function, default: null },
+    minSearchLength: { type: Number, default: 0 },
+    debounce: { type: Number, default: 300 },
+    
+    // Appearance
+    size: { type: String, default: 'md' },
+    rounded: { type: String, default: '' },
+    border: { type: String, default: 'border-input-border' },
+    textColor: { type: String, default: 'text-input-text' },
+    bg: { type: String, default: 'bg-input-background' },
+    containerClass: { type: String, default: '' },
+    menuClass: { type: String, default: '' },
+    menuStyle: { type: Object, default: () => ({}) },
+    itemClass: { type: String, default: '' },
+    itemHoverClass: { type: String, default: '' },
+    id: { type: String, default: '' },
+    width: { type: String, default: 'w-full' },
+    
+    // RTL/Lang support
+    dir: { type: String, default: '' },
+    lang: { type: String, default: '' },
+})
+
+  // Inject dir from parent Card (if exists)
+  const cardDir = inject('parentDir', '')
+  const cardLang = inject('parentLang', '')
+
+  // Use component's dir if provided, otherwise use card's dir
+  const computedDir = computed(() => props.dir || cardDir)
+  const computedLang = computed(() => props.lang || cardLang)
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:searchInput',
+  'input', 
+  'change', 
+  'focus', 
+  'blur',
+  'select',
+  'clear',
+  'search'
+])
+
+const containerRef = ref(null)
+const inputRef = ref(null)
+const menuRef = ref(null)
+const localValue = ref('')
+const isFocused = ref(false)
+const showResults = ref(false)
+const highlightedIndex = ref(-1)
+let debounceTimeout = null
+
+// Generate unique ID
+const inputId = computed(() => props.id || `search-${Math.random().toString(36).substr(2, 9)}`)
+
+// Initialize local value
+watch(() => props.modelValue, (newVal) => {
+  if (!newVal) {
+    localValue.value = ''
+    return
+  }
+  
+  if (props.returnObject) {
+    localValue.value = getItemText(newVal)
+  } else {
+    // Find the item by value and show its text
+    const item = props.items.find(i => getItemValue(i) === newVal)
+    localValue.value = item ? getItemText(item) : newVal.toString()
+  }
+}, { immediate: true })
+
+// Watch search input
+watch(() => props.searchInput, (newVal) => {
+  localValue.value = newVal
+})
+
+// Filter items
+const filteredItems = computed(() => {
+  const search = localValue.value?.toString().toLowerCase() || ''
+  
+  if (search.length < props.minSearchLength) {
+    return []
+  }
+
+  if (!search && props.items.length > 0) {
+    return props.items
+  }
+
+  if (props.customFilter) {
+    return props.customFilter(props.items, search)
+  }
+
+  return props.items.filter(item => {
+    const searchKeys = props.filterKeys.length > 0 
+      ? props.filterKeys 
+      : [props.itemText]
+    
+    return searchKeys.some(key => {
+      const value = typeof key === 'function' 
+        ? key(item) 
+        : item[key]
+      return value?.toString().toLowerCase().includes(search)
+    })
+  })
+})
+
+// Get item text
+const getItemText = (item) => {
+  if (!item) return ''
+  if (typeof item === 'string' || typeof item === 'number') return item.toString()
+  if (typeof props.itemText === 'function') return props.itemText(item)
+  return item[props.itemText] || ''
+}
+
+// Get item value
+const getItemValue = (item) => {
+  if (!item) return ''
+  if (typeof item === 'string' || typeof item === 'number') return item
+  if (typeof props.itemValue === 'function') return props.itemValue(item)
+  return item[props.itemValue] || item
+}
+
+// Input classes
+const inputClasses = computed(() => [
+  'w-full bg-transparent outline-none border-none',
+  'placeholder:text-gray-400',
+  'focus:outline-none'
+])
+
+// Handlers
+const handleInput = (e) => {
+  const value = e.target.value
+  localValue.value = value
+  
+  clearTimeout(debounceTimeout)
+  debounceTimeout = setTimeout(() => {
+    emit('update:searchInput', value)
+    emit('input', value)
+    emit('search', value)
+    emit('update:modelValue', value)
+    
+    if (value.length >= props.minSearchLength) {
+      showResults.value = true
+    } else {
+      showResults.value = false
+    }
+  }, props.debounce)
+}
+
+const handleFocus = (event) => {
+  isFocused.value = true
+  emit('focus', event)
+  
+  if (localValue.value.length >= props.minSearchLength) {
+    showResults.value = true
+  }
+}
+
+const handleBlur = (event) => {
+  // Delay to allow click on menu items
+  setTimeout(() => {
+    isFocused.value = false
+    emit('blur', event)
+  }, 200)
+}
+
+const handleClickOutside = () => {
+  showResults.value = false
+}
+
+const handleEnter = (event) => {
+  if (highlightedIndex.value >= 0 && highlightedIndex.value < filteredItems.value.length) {
+    event.preventDefault()
+    selectItem(filteredItems.value[highlightedIndex.value])
+  }
+}
+
+const handleEscape = () => {
+  showResults.value = false
+  inputRef.value?.blur()
+}
+
+const handleArrowDown = (event) => {
+  event.preventDefault()
+  if (highlightedIndex.value < filteredItems.value.length - 1) {
+    highlightedIndex.value++
+  }
+}
+
+const handleArrowUp = (event) => {
+  event.preventDefault()
+  if (highlightedIndex.value > 0) {
+    highlightedIndex.value--
+  }
+}
+
+const selectItem = (item) => {
+  const value = props.returnObject ? item : getItemValue(item)
+  const text = getItemText(item)
+  
+  localValue.value = text
+  emit('update:modelValue', value)
+  emit('update:searchInput', text)
+  emit('select', item)
+  
+  showResults.value = false
+  highlightedIndex.value = -1
+}
+
+const clear = () => {
+  localValue.value = ''
+  emit('update:modelValue', '')
+  emit('update:searchInput', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// Focus method
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// Lifecycle
+onMounted(() => {
+  // No need for resize/scroll listeners with absolute positioning
+})
+
+onBeforeUnmount(() => {
+  clearTimeout(debounceTimeout)
+})
+
+// Expose methods
+defineExpose({ focus, clear })
+</script>
+
+<style scoped>
+/* Remove default search input styling */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+/* Transition styles matching Select component */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>