@codingfactory/inventory-locator-client 0.1.0

package/src/components/shared/InvInput.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="inv-input" :class="{ 'inv-input--error': !!error, 'inv-input--disabled': disabled }">
+    <label v-if="label" :for="inputId" class="inv-input__label">
+      {{ label }}
+    </label>
+    <input
+      :id="inputId"
+      ref="inputRef"
+      class="inv-input__field"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :aria-invalid="!!error || undefined"
+      :aria-describedby="error ? errorId : undefined"
+      @input="handleInput"
+    />
+    <p v-if="error" :id="errorId" class="inv-input__error" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, useId } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | number
+  label?: string
+  placeholder?: string
+  type?: 'text' | 'number' | 'search'
+  error?: string
+  disabled?: boolean
+  autofocus?: boolean
+}>(), {
+  type: 'text',
+  disabled: false,
+  autofocus: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const uid = useId()
+const inputId = `inv-input-${uid}`
+const errorId = `inv-input-error-${uid}`
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  if (props.type === 'number') {
+    emit('update:modelValue', target.valueAsNumber)
+  } else {
+    emit('update:modelValue', target.value)
+  }
+}
+
+onMounted(() => {
+  if (props.autofocus && inputRef.value) {
+    inputRef.value.focus()
+  }
+})
+</script>
+
+<style scoped>
+.inv-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.inv-input__label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.inv-input__field {
+  height: 44px;
+  padding: 0 var(--space-3, 0.75rem);
+  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;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+  width: 100%;
+}
+
+.inv-input__field::placeholder {
+  color: var(--admin-text-tertiary);
+}
+
+.inv-input__field:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.inv-input--error .inv-input__field {
+  border-color: var(--color-error, #dc2626);
+}
+
+.inv-input--error .inv-input__field:focus {
+  border-color: var(--color-error, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+.inv-input--disabled .inv-input__field {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--admin-content-bg);
+}
+
+.inv-input__error {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--color-error, #dc2626);
+  line-height: 1.4;
+}
+</style>

package/src/components/shared/InvModal.vue

@@ -0,0 +1,296 @@
+<template>
+  <Teleport to="body">
+    <Transition name="inv-modal">
+      <div
+        v-if="show"
+        class="inv-modal__backdrop"
+        @mousedown.self="handleBackdropClick"
+      >
+        <div
+          ref="dialogRef"
+          class="inv-modal__dialog"
+          :class="[`inv-modal__dialog--${size}`]"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="titleId"
+          :aria-describedby="description ? descriptionId : undefined"
+          @keydown="handleKeydown"
+        >
+          <div class="inv-modal__header">
+            <div>
+              <h2 :id="titleId" class="inv-modal__title">{{ title }}</h2>
+              <p
+                v-if="description"
+                :id="descriptionId"
+                class="inv-modal__description"
+              >
+                {{ description }}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="inv-modal__close"
+              aria-label="Close dialog"
+              @click="handleClose"
+            >
+              <svg
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path
+                  d="M15 5L5 15M5 5L15 15"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div class="inv-modal__body">
+            <slot />
+          </div>
+
+          <div v-if="$slots.footer" class="inv-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick, onBeforeUnmount, useId } from 'vue'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  title: string
+  description?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  initialFocusSelector?: string
+}>(), {
+  size: 'md',
+})
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  close: []
+}>()
+
+const uid = useId()
+const titleId = `inv-modal-title-${uid}`
+const descriptionId = `inv-modal-desc-${uid}`
+
+const dialogRef = ref<HTMLElement | null>(null)
+let previouslyFocusedElement: HTMLElement | null = null
+
+function getFocusableElements(): HTMLElement[] {
+  if (!dialogRef.value) return []
+  const selectors = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+  ]
+  return Array.from(dialogRef.value.querySelectorAll<HTMLElement>(selectors.join(',')))
+}
+
+function trapFocus(event: KeyboardEvent) {
+  const focusable = getFocusableElements()
+  if (focusable.length === 0) return
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (event.shiftKey) {
+    if (document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    }
+  } else {
+    if (document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    handleClose()
+  } else if (event.key === 'Tab') {
+    trapFocus(event)
+  }
+}
+
+function handleClose() {
+  emit('update:show', false)
+  emit('close')
+}
+
+function handleBackdropClick() {
+  handleClose()
+}
+
+watch(() => props.show, async (isVisible) => {
+  if (isVisible) {
+    previouslyFocusedElement = document.activeElement as HTMLElement
+    document.body.style.overflow = 'hidden'
+    await nextTick()
+    await nextTick()
+
+    if (props.initialFocusSelector && dialogRef.value) {
+      const target = dialogRef.value.querySelector<HTMLElement>(props.initialFocusSelector)
+      if (target) {
+        target.focus()
+        return
+      }
+    }
+
+    const focusable = getFocusableElements()
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      dialogRef.value?.focus()
+    }
+  } else {
+    document.body.style.overflow = ''
+    if (previouslyFocusedElement) {
+      previouslyFocusedElement.focus()
+      previouslyFocusedElement = null
+    }
+  }
+})
+
+onBeforeUnmount(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<style scoped>
+.inv-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4, 1rem);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.inv-modal__dialog {
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 12px;
+  box-shadow: var(--shadow-md);
+  width: 100%;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+
+.inv-modal__dialog--sm { max-width: 400px; }
+.inv-modal__dialog--md { max-width: 560px; }
+.inv-modal__dialog--lg { max-width: 720px; }
+.inv-modal__dialog--xl { max-width: 900px; }
+
+.inv-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) var(--space-3, 0.75rem);
+  flex-shrink: 0;
+}
+
+.inv-modal__title {
+  margin: 0;
+  font-size: var(--text-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.inv-modal__description {
+  margin: var(--space-1, 0.25rem) 0 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+  line-height: 1.5;
+}
+
+.inv-modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--admin-text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.inv-modal__close:hover {
+  background: var(--admin-content-bg);
+  color: var(--admin-text-primary);
+}
+
+.inv-modal__close:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.inv-modal__body {
+  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.inv-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem);
+  border-top: 1px solid var(--admin-border);
+  flex-shrink: 0;
+}
+
+/* Transitions */
+.inv-modal-enter-active,
+.inv-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.inv-modal-enter-active .inv-modal__dialog,
+.inv-modal-leave-active .inv-modal__dialog {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.inv-modal-enter-from,
+.inv-modal-leave-to {
+  opacity: 0;
+}
+
+.inv-modal-enter-from .inv-modal__dialog,
+.inv-modal-leave-to .inv-modal__dialog {
+  transform: scale(0.95);
+  opacity: 0;
+}
+</style>

package/src/components/shared/InvSelect.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="inv-select" :class="{ 'inv-select--error': !!error, 'inv-select--disabled': disabled }">
+    <label v-if="label" :for="selectId" class="inv-select__label">
+      {{ label }}
+    </label>
+    <div class="inv-select__wrapper">
+      <select
+        :id="selectId"
+        class="inv-select__field"
+        :value="modelValue"
+        :disabled="disabled"
+        :aria-invalid="!!error || undefined"
+        :aria-describedby="error ? errorId : undefined"
+        @change="handleChange"
+      >
+        <option v-if="placeholder" value="" disabled>
+          {{ placeholder }}
+        </option>
+        <option
+          v-for="opt in options"
+          :key="opt.value"
+          :value="opt.value"
+        >
+          {{ opt.label }}
+        </option>
+      </select>
+      <svg
+        class="inv-select__chevron"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path
+          d="M4 6L8 10L12 6"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+    <p v-if="error" :id="errorId" class="inv-select__error" role="alert">
+      {{ error }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | number
+  options: { value: string | number; label: string }[]
+  label?: string
+  placeholder?: string
+  error?: string
+  disabled?: boolean
+}>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+const uid = useId()
+const selectId = `inv-select-${uid}`
+const errorId = `inv-select-error-${uid}`
+
+function handleChange(event: Event) {
+  const target = event.target as HTMLSelectElement
+  const selectedOption = props.options.find(
+    (opt) => String(opt.value) === target.value
+  )
+  if (selectedOption) {
+    emit('update:modelValue', selectedOption.value)
+  } else {
+    emit('update:modelValue', target.value)
+  }
+}
+</script>
+
+<style scoped>
+.inv-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1, 0.25rem);
+}
+
+.inv-select__label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.inv-select__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.inv-select__field {
+  height: 44px;
+  width: 100%;
+  padding: 0 var(--space-8, 2rem) 0 var(--space-3, 0.75rem);
+  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;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.inv-select__field:focus {
+  border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+.inv-select--error .inv-select__field {
+  border-color: var(--color-error, #dc2626);
+}
+
+.inv-select--error .inv-select__field:focus {
+  border-color: var(--color-error, #dc2626);
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+}
+
+.inv-select--disabled .inv-select__field {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--admin-content-bg);
+}
+
+.inv-select__chevron {
+  position: absolute;
+  right: var(--space-3, 0.75rem);
+  color: var(--admin-text-tertiary);
+  pointer-events: none;
+}
+
+.inv-select__error {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: var(--color-error, #dc2626);
+  line-height: 1.4;
+}
+</style>