@codingfactory/inventory-locator-client 0.1.0

package/src/components/locations/LocationSearchInput.vue

@@ -0,0 +1,428 @@
+<template>
+  <div
+    class="location-search"
+    :class="{ 'location-search--open': showDropdown }"
+  >
+    <div class="location-search__input-wrapper">
+      <svg
+        class="location-search__icon"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <input
+        ref="inputRef"
+        type="search"
+        class="location-search__input"
+        :value="modelValue"
+        :placeholder="placeholder"
+        role="combobox"
+        aria-autocomplete="list"
+        :aria-expanded="showDropdown"
+        :aria-controls="listboxId"
+        :aria-activedescendant="activeDescendantId"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <button
+        v-if="modelValue"
+        type="button"
+        class="location-search__clear"
+        aria-label="Clear search"
+        @mousedown.prevent="handleClear"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M12 4L4 12M4 4L12 12"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      <span
+        v-if="searchComposable.loading.value"
+        class="location-search__spinner"
+        aria-hidden="true"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" opacity="0.25" />
+          <path d="M14 8A6 6 0 0 0 8 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+        </svg>
+      </span>
+    </div>
+
+    <Transition name="location-search-dropdown">
+      <ul
+        v-if="showDropdown"
+        :id="listboxId"
+        ref="listboxRef"
+        class="location-search__dropdown"
+        role="listbox"
+        :aria-label="placeholder"
+      >
+        <li
+          v-if="searchComposable.loading.value && searchComposable.results.value.length === 0"
+          class="location-search__dropdown-item location-search__dropdown-item--loading"
+          role="presentation"
+        >
+          <span>Searching...</span>
+        </li>
+        <li
+          v-else-if="!searchComposable.loading.value && searchComposable.results.value.length === 0 && modelValue.length >= 2"
+          class="location-search__dropdown-item location-search__dropdown-item--empty"
+          role="presentation"
+        >
+          <span>No locations found</span>
+        </li>
+        <li
+          v-for="(location, index) in searchComposable.results.value"
+          :id="`${listboxId}-option-${index}`"
+          :key="location.id"
+          class="location-search__dropdown-item"
+          :class="{ 'location-search__dropdown-item--active': index === activeIndex }"
+          role="option"
+          :aria-selected="index === activeIndex"
+          @mousedown.prevent="selectLocation(location)"
+          @mouseenter="activeIndex = index"
+        >
+          <LocationTypeIcon :type="location.type" size="sm" />
+          <div class="location-search__result-info">
+            <span class="location-search__result-name">{{ location.name }}</span>
+            <span class="location-search__result-code">{{ location.full_code }}</span>
+          </div>
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, useId, watch } from 'vue'
+import type { Location } from '../../types'
+import { useLocationSearch } from '../../composables/useLocationSearch'
+import LocationTypeIcon from './LocationTypeIcon.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  autofocus?: boolean
+}>(), {
+  placeholder: 'Search locations...',
+  autofocus: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  select: [location: Location]
+}>()
+
+const uid = useId()
+const listboxId = `location-search-listbox-${uid}`
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const listboxRef = ref<HTMLUListElement | null>(null)
+const activeIndex = ref(-1)
+const isFocused = ref(false)
+
+const searchComposable = useLocationSearch()
+
+const showDropdown = computed(() => {
+  if (!isFocused.value) return false
+  if (props.modelValue.length < 2) return false
+  if (searchComposable.loading.value) return true
+  return searchComposable.results.value.length > 0 || props.modelValue.length >= 2
+})
+
+const activeDescendantId = computed(() => {
+  if (activeIndex.value < 0) return undefined
+  return `${listboxId}-option-${activeIndex.value}`
+})
+
+watch(() => props.modelValue, (val) => {
+  activeIndex.value = -1
+  searchComposable.search(val)
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+function handleFocus() {
+  isFocused.value = true
+  if (props.modelValue.length >= 2) {
+    searchComposable.search(props.modelValue)
+  }
+}
+
+function handleBlur() {
+  // Delay to allow mousedown on dropdown to fire first
+  setTimeout(() => {
+    isFocused.value = false
+    activeIndex.value = -1
+  }, 150)
+}
+
+function handleClear() {
+  emit('update:modelValue', '')
+  searchComposable.clear()
+  activeIndex.value = -1
+  inputRef.value?.focus()
+}
+
+function selectLocation(location: Location) {
+  emit('select', location)
+  emit('update:modelValue', '')
+  searchComposable.clear()
+  activeIndex.value = -1
+  isFocused.value = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  const results = searchComposable.results.value
+  if (!showDropdown.value || results.length === 0) {
+    if (event.key === 'Escape') {
+      handleClear()
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, results.length - 1)
+      scrollActiveIntoView()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      scrollActiveIntoView()
+      break
+    case 'Enter':
+      event.preventDefault()
+      if (activeIndex.value >= 0 && activeIndex.value < results.length) {
+        selectLocation(results[activeIndex.value])
+      }
+      break
+    case 'Escape':
+      event.preventDefault()
+      isFocused.value = false
+      activeIndex.value = -1
+      break
+  }
+}
+
+function scrollActiveIntoView() {
+  if (!listboxRef.value || activeIndex.value < 0) return
+  const items = listboxRef.value.querySelectorAll('[role="option"]')
+  const activeItem = items[activeIndex.value] as HTMLElement | undefined
+  if (activeItem) {
+    activeItem.scrollIntoView({ block: 'nearest' })
+  }
+}
+
+onMounted(() => {
+  if (props.autofocus && inputRef.value) {
+    inputRef.value.focus()
+  }
+})
+</script>
+
+<style scoped>
+.location-search {
+  position: relative;
+  width: 100%;
+}
+
+.location-search__input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.location-search__icon {
+  position: absolute;
+  left: var(--space-3, 0.75rem);
+  color: var(--admin-text-tertiary);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.location-search__input {
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--space-8, 2rem) 0 calc(var(--space-3, 0.75rem) + 18px + var(--space-2, 0.5rem));
+  border: 1px solid var(--admin-border);
+  border-radius: 6px;
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  font-size: var(--text-sm, 0.875rem);
+  line-height: 1;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.location-search__input::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.location-search__input:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+/* Hide native search cancel button */
+.location-search__input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.location-search__clear {
+  position: absolute;
+  right: var(--space-2, 0.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.location-search__clear:hover {
+  background: var(--admin-content-bg);
+  color: var(--admin-text-primary);
+}
+
+.location-search__clear:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.location-search__spinner {
+  position: absolute;
+  right: var(--space-3, 0.75rem);
+  display: flex;
+  align-items: center;
+  color: var(--admin-text-tertiary);
+  animation: location-search-spin 0.8s linear infinite;
+}
+
+.location-search__input-wrapper:has(.location-search__clear) .location-search__spinner {
+  right: calc(var(--space-2, 0.5rem) + 28px + var(--space-1, 0.25rem));
+}
+
+@keyframes location-search-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Dropdown */
+.location-search__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 100;
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--space-1, 0.25rem) 0;
+  list-style: none;
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
+}
+
+.location-search__dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  color: var(--admin-text-primary);
+}
+
+.location-search__dropdown-item:hover,
+.location-search__dropdown-item--active {
+  background: var(--admin-table-row-hover);
+}
+
+.location-search__dropdown-item--loading,
+.location-search__dropdown-item--empty {
+  cursor: default;
+  color: var(--admin-text-tertiary);
+  font-size: var(--text-sm, 0.875rem);
+  font-style: italic;
+  justify-content: center;
+  padding: var(--space-3, 0.75rem);
+}
+
+.location-search__dropdown-item--loading:hover,
+.location-search__dropdown-item--empty:hover {
+  background: transparent;
+}
+
+.location-search__result-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.location-search__result-name {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.location-search__result-code {
+  font-size: var(--text-xs, 0.75rem);
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  color: var(--admin-text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dropdown transition */
+.location-search-dropdown-enter-active,
+.location-search-dropdown-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.location-search-dropdown-enter-from,
+.location-search-dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

package/src/components/locations/LocationTree.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="location-tree" role="tree" aria-label="Location hierarchy">
+    <!-- Loading state -->
+    <div v-if="loading" class="location-tree__loading" aria-live="polite">
+      <div
+        v-for="n in 5"
+        :key="n"
+        class="location-tree__skeleton-row"
+        :style="{ paddingLeft: `${(n % 3) * 20}px` }"
+      >
+        <div class="location-tree__skeleton-bar location-tree__skeleton-bar--icon" />
+        <div class="location-tree__skeleton-bar location-tree__skeleton-bar--name" />
+        <div class="location-tree__skeleton-bar location-tree__skeleton-bar--code" />
+      </div>
+      <span class="sr-only">Loading locations...</span>
+    </div>
+
+    <!-- Empty state -->
+    <InvEmptyState
+      v-else-if="locationStore.roots.length === 0"
+      title="No locations yet"
+      description="Create your first warehouse or storage location to start organizing inventory."
+      action-label="Create Location"
+      @action="emit('create')"
+    />
+
+    <!-- Tree nodes -->
+    <div v-else>
+      <LocationTreeNode
+        v-for="root in locationStore.roots"
+        :key="root.id"
+        :location="root"
+        :depth="0"
+        :selected-id="locationStore.selectedLocationId"
+        @select="handleSelect"
+        @toggle="handleToggle"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { Location } from '../../types'
+import { useLocationStore } from '../../stores/locationStore'
+import { useLocations } from '../../composables/useLocations'
+import InvEmptyState from '../shared/InvEmptyState.vue'
+import LocationTreeNode from './LocationTreeNode.vue'
+
+const emit = defineEmits<{
+  select: [location: Location]
+  create: []
+}>()
+
+const locationStore = useLocationStore()
+const { fetchRoots } = useLocations()
+
+const loading = ref(false)
+
+async function loadRoots() {
+  if (locationStore.roots.length > 0) return
+  loading.value = true
+  try {
+    await fetchRoots()
+  } catch {
+    // Error handled by composable
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSelect(location: Location) {
+  locationStore.selectLocation(location.id)
+  emit('select', location)
+}
+
+function handleToggle(_id: number) {
+  // Toggle is handled inside LocationTreeNode via locationStore
+}
+
+onMounted(() => {
+  loadRoots()
+})
+</script>
+
+<style scoped>
+.location-tree {
+  padding: var(--space-2, 0.5rem);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.location-tree__loading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-2, 0.5rem);
+}
+
+.location-tree__skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+  min-height: 36px;
+}
+
+.location-tree__skeleton-bar {
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--admin-border) 25%,
+    var(--admin-content-bg) 50%,
+    var(--admin-border) 75%
+  );
+  background-size: 200% 100%;
+  animation: tree-shimmer 1.5s ease-in-out infinite;
+}
+
+.location-tree__skeleton-bar--icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.location-tree__skeleton-bar--name {
+  width: 100px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.location-tree__skeleton-bar--code {
+  width: 60px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+@keyframes tree-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>