@codingfactory/inventory-locator-client 0.1.0

package/src/components/locations/LocationBreadcrumb.vue

@@ -0,0 +1,144 @@
+<template>
+  <nav class="location-breadcrumb" aria-label="Location path">
+    <ol class="location-breadcrumb__list">
+      <template v-if="shouldTruncate">
+        <li class="location-breadcrumb__item location-breadcrumb__item--ellipsis">
+          <span class="location-breadcrumb__ellipsis" aria-hidden="true">&hellip;</span>
+        </li>
+        <li
+          class="location-breadcrumb__item"
+          aria-hidden="true"
+        >
+          <span class="location-breadcrumb__separator">&rsaquo;</span>
+        </li>
+      </template>
+      <li
+        v-for="(segment, index) in visibleSegments"
+        :key="segment.id"
+        class="location-breadcrumb__item"
+      >
+        <span
+          v-if="index > 0 || shouldTruncate"
+          class="location-breadcrumb__separator"
+          aria-hidden="true"
+        >&rsaquo;</span>
+        <button
+          v-if="!isLast(index)"
+          type="button"
+          class="location-breadcrumb__link"
+          :aria-label="`Navigate to ${segment.name}`"
+          @click="emit('navigate', segment)"
+        >
+          {{ segment.name }}
+        </button>
+        <span
+          v-else
+          class="location-breadcrumb__current"
+          aria-current="location"
+        >
+          {{ segment.name }}
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PathSegment } from '../../types'
+
+const MAX_VISIBLE = 3
+
+const props = defineProps<{
+  path: PathSegment[]
+}>()
+
+const emit = defineEmits<{
+  navigate: [segment: PathSegment]
+}>()
+
+const shouldTruncate = computed(() => props.path.length > MAX_VISIBLE)
+
+const visibleSegments = computed(() => {
+  if (shouldTruncate.value) {
+    return props.path.slice(-MAX_VISIBLE)
+  }
+  return props.path
+})
+
+function isLast(index: number): boolean {
+  return index === visibleSegments.value.length - 1
+}
+</script>
+
+<style scoped>
+.location-breadcrumb {
+  overflow: hidden;
+}
+
+.location-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--space-1, 0.25rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
+
+.location-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1, 0.25rem);
+  min-width: 0;
+}
+
+.location-breadcrumb__separator {
+  color: var(--admin-text-tertiary);
+  font-size: var(--text-sm, 0.875rem);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+.location-breadcrumb__ellipsis {
+  color: var(--admin-text-tertiary);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.location-breadcrumb__link {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--color-primary, #2563eb);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+  border-radius: 2px;
+  line-height: 1.4;
+}
+
+.location-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+
+.location-breadcrumb__link:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.location-breadcrumb__current {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+</style>

package/src/components/locations/LocationCodeBadge.vue

@@ -0,0 +1,46 @@
+<template>
+  <span
+    class="location-code-badge"
+    :title="code"
+  >
+    {{ displayCode }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { truncateCode } from '../../utils/codeFormatter'
+
+const props = withDefaults(defineProps<{
+  code: string
+  truncate?: boolean
+  maxSegments?: number
+}>(), {
+  truncate: false,
+  maxSegments: 2,
+})
+
+const displayCode = computed(() => {
+  if (props.truncate) {
+    return truncateCode(props.code, props.maxSegments)
+  }
+  return props.code
+})
+</script>
+
+<style scoped>
+.location-code-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--space-2, 0.5rem);
+  border-radius: 9999px;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  color: var(--admin-text-secondary);
+}
+</style>