pgo-uiux2 1.0.0

package/src/components/pgo/TestInput.vue

@@ -0,0 +1,395 @@
+<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="dir" 
+        :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 } 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: '' },
+})
+
+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 (props.returnObject) {
+    localValue.value = newVal ? getItemText(newVal) : ''
+  } else {
+    localValue.value = newVal || ''
+  }
+}, { 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>