@codingfactory/inventory-locator-client 0.1.0

package/src/components/shared/InvBadge.vue

@@ -0,0 +1,71 @@
+<template>
+  <span
+    class="inv-badge"
+    :class="[`inv-badge--${variant}`, `inv-badge--${size}`]"
+  >
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'muted'
+  size?: 'sm' | 'md'
+}>(), {
+  variant: 'default',
+  size: 'sm',
+})
+</script>
+
+<style scoped>
+.inv-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Sizes */
+.inv-badge--sm {
+  padding: 2px var(--space-2, 0.5rem);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.inv-badge--md {
+  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+/* Variants */
+.inv-badge--default {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
+  color: var(--color-primary, #2563eb);
+}
+
+.inv-badge--success {
+  background: color-mix(in srgb, var(--color-success, #059669) 12%, transparent);
+  color: var(--color-success, #059669);
+}
+
+.inv-badge--warning {
+  background: color-mix(in srgb, var(--color-warning, #d97706) 12%, transparent);
+  color: var(--color-warning, #d97706);
+}
+
+.inv-badge--error {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 12%, transparent);
+  color: var(--color-error, #dc2626);
+}
+
+.inv-badge--info {
+  background: color-mix(in srgb, var(--color-info, #0891b2) 12%, transparent);
+  color: var(--color-info, #0891b2);
+}
+
+.inv-badge--muted {
+  background: var(--admin-content-bg);
+  color: var(--admin-text-tertiary);
+}
+</style>

package/src/components/shared/InvButton.vue

@@ -0,0 +1,206 @@
+<template>
+  <button
+    class="inv-btn"
+    :class="[
+      `inv-btn--${variant}`,
+      `inv-btn--${size}`,
+      { 'inv-btn--loading': loading, 'inv-btn--disabled': disabled || loading },
+    ]"
+    :type="type"
+    :disabled="disabled || loading"
+    :aria-busy="loading || undefined"
+  >
+    <span v-if="loading" class="inv-btn__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"
+          stroke-linecap="round"
+          opacity="0.25"
+        />
+        <path
+          d="M14 8A6 6 0 0 0 8 2"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </svg>
+    </span>
+    <span v-else-if="$slots['icon-left']" class="inv-btn__icon inv-btn__icon--left">
+      <slot name="icon-left" />
+    </span>
+
+    <span class="inv-btn__label">
+      <slot />
+    </span>
+
+    <span v-if="$slots['icon-right']" class="inv-btn__icon inv-btn__icon--right">
+      <slot name="icon-right" />
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost'
+  size?: 'sm' | 'md' | 'lg'
+  loading?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit'
+}>(), {
+  variant: 'primary',
+  size: 'md',
+  loading: false,
+  disabled: false,
+  type: 'button',
+})
+</script>
+
+<style scoped>
+.inv-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2, 0.5rem);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease, box-shadow 0.15s ease;
+  user-select: none;
+}
+
+.inv-btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+/* Sizes */
+.inv-btn--sm {
+  min-height: 36px;
+  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.inv-btn--md {
+  min-height: 44px;
+  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.inv-btn--lg {
+  min-height: 52px;
+  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
+  font-size: var(--text-base, 1rem);
+}
+
+/* Primary variant */
+.inv-btn--primary {
+  background: var(--color-primary, #2563eb);
+  color: #fff;
+  border-color: var(--color-primary, #2563eb);
+}
+
+.inv-btn--primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 85%, black);
+  border-color: color-mix(in srgb, var(--color-primary, #2563eb) 85%, black);
+}
+
+.inv-btn--primary:active:not(:disabled) {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 75%, black);
+}
+
+/* Secondary variant */
+.inv-btn--secondary {
+  background: var(--admin-card-bg);
+  color: var(--admin-text-primary);
+  border-color: var(--admin-border);
+}
+
+.inv-btn--secondary:hover:not(:disabled) {
+  background: var(--admin-content-bg);
+  border-color: var(--admin-text-tertiary);
+}
+
+.inv-btn--secondary:active:not(:disabled) {
+  background: var(--admin-table-header-bg);
+}
+
+/* Danger variant */
+.inv-btn--danger {
+  background: var(--color-error, #dc2626);
+  color: #fff;
+  border-color: var(--color-error, #dc2626);
+}
+
+.inv-btn--danger:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 85%, black);
+  border-color: color-mix(in srgb, var(--color-error, #dc2626) 85%, black);
+}
+
+.inv-btn--danger:active:not(:disabled) {
+  background: color-mix(in srgb, var(--color-error, #dc2626) 75%, black);
+}
+
+/* Ghost variant */
+.inv-btn--ghost {
+  background: transparent;
+  color: var(--admin-text-secondary);
+  border-color: transparent;
+}
+
+.inv-btn--ghost:hover:not(:disabled) {
+  background: var(--admin-content-bg);
+  color: var(--admin-text-primary);
+}
+
+.inv-btn--ghost:active:not(:disabled) {
+  background: var(--admin-table-header-bg);
+}
+
+/* Disabled state */
+.inv-btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Loading */
+.inv-btn--loading {
+  cursor: wait;
+}
+
+.inv-btn__spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: inv-btn-spin 0.8s linear infinite;
+}
+
+@keyframes inv-btn-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.inv-btn__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.inv-btn__label {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/components/shared/InvCard.vue

@@ -0,0 +1,254 @@
+<template>
+  <div
+    class="inv-card"
+    :class="{ 'inv-card--compact': compact, 'inv-card--no-padding': noPadding }"
+  >
+    <div
+      v-if="title || $slots.actions"
+      class="inv-card__header"
+      :class="{ 'inv-card__header--collapsible': collapsible }"
+    >
+      <div class="inv-card__header-content">
+        <component
+          :is="collapsible ? 'button' : 'div'"
+          class="inv-card__title-area"
+          :class="{ 'inv-card__title-button': collapsible }"
+          :type="collapsible ? 'button' : undefined"
+          :aria-expanded="collapsible ? !isCollapsed : undefined"
+          :aria-controls="collapsible ? contentId : undefined"
+          @click="collapsible ? handleToggle() : undefined"
+        >
+          <svg
+            v-if="collapsible"
+            class="inv-card__chevron"
+            :class="{ 'inv-card__chevron--collapsed': isCollapsed }"
+            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>
+            <h3 v-if="title" class="inv-card__title">{{ title }}</h3>
+            <p v-if="subtitle" class="inv-card__subtitle">{{ subtitle }}</p>
+          </div>
+        </component>
+      </div>
+      <div v-if="$slots.actions" class="inv-card__actions">
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <div
+      v-show="!isCollapsed"
+      :id="contentId"
+      class="inv-card__body"
+      role="region"
+      :aria-labelledby="title ? titleId : undefined"
+    >
+      <div v-if="loading" class="inv-card__loading-overlay" aria-live="polite">
+        <div class="inv-card__shimmer" />
+        <div class="inv-card__shimmer inv-card__shimmer--short" />
+        <div class="inv-card__shimmer inv-card__shimmer--medium" />
+        <span class="sr-only">Loading...</span>
+      </div>
+      <slot v-else />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, useId } from 'vue'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  loading?: boolean
+  collapsible?: boolean
+  collapsed?: boolean
+  noPadding?: boolean
+  compact?: boolean
+}>(), {
+  loading: false,
+  collapsible: false,
+  collapsed: false,
+  noPadding: false,
+  compact: false,
+})
+
+const emit = defineEmits<{
+  toggle: [collapsed: boolean]
+}>()
+
+const uid = useId()
+const contentId = computed(() => `inv-card-content-${uid}`)
+const titleId = computed(() => `inv-card-title-${uid}`)
+
+const isCollapsed = ref(props.collapsed)
+
+watch(() => props.collapsed, (val) => {
+  isCollapsed.value = val
+})
+
+function handleToggle() {
+  isCollapsed.value = !isCollapsed.value
+  emit('toggle', isCollapsed.value)
+}
+</script>
+
+<style scoped>
+.inv-card {
+  background: var(--admin-card-bg);
+  border: 1px solid var(--admin-border);
+  border-radius: 8px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.inv-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
+  border-bottom: 1px solid var(--admin-border);
+}
+
+.inv-card--compact .inv-card__header {
+  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+}
+
+.inv-card__header-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+
+.inv-card__title-area {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  min-width: 0;
+}
+
+.inv-card__title-button {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  border-radius: 4px;
+}
+
+.inv-card__title-button:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+.inv-card__chevron {
+  flex-shrink: 0;
+  color: var(--admin-text-tertiary);
+  transition: transform 0.2s ease;
+}
+
+.inv-card__chevron--collapsed {
+  transform: rotate(-90deg);
+}
+
+.inv-card__title {
+  margin: 0;
+  font-size: var(--text-base, 1rem);
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  line-height: 1.4;
+}
+
+.inv-card--compact .inv-card__title {
+  font-size: var(--text-sm, 0.875rem);
+}
+
+.inv-card__subtitle {
+  margin: var(--space-1, 0.25rem) 0 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-secondary);
+  line-height: 1.4;
+}
+
+.inv-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 0.5rem);
+  flex-shrink: 0;
+}
+
+.inv-card__body {
+  padding: var(--space-5, 1.25rem);
+  position: relative;
+}
+
+.inv-card--compact .inv-card__body {
+  padding: var(--space-4, 1rem);
+}
+
+.inv-card--no-padding .inv-card__body {
+  padding: 0;
+}
+
+.inv-card__loading-overlay {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+  padding: var(--space-2, 0.5rem) 0;
+}
+
+.inv-card__shimmer {
+  height: 16px;
+  width: 100%;
+  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: inv-shimmer 1.5s ease-in-out infinite;
+}
+
+.inv-card__shimmer--short {
+  width: 60%;
+}
+
+.inv-card__shimmer--medium {
+  width: 80%;
+}
+
+@keyframes inv-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>

package/src/components/shared/InvEmptyState.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="inv-empty-state" role="status">
+    <svg
+      class="inv-empty-state__icon"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      aria-hidden="true"
+    >
+      <rect
+        x="6"
+        y="10"
+        width="36"
+        height="28"
+        rx="4"
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+      />
+      <path
+        d="M6 18H42"
+        stroke="currentColor"
+        stroke-width="2"
+      />
+      <circle cx="12" cy="14" r="1.5" fill="currentColor" />
+      <circle cx="17" cy="14" r="1.5" fill="currentColor" />
+      <circle cx="22" cy="14" r="1.5" fill="currentColor" />
+      <path
+        d="M18 28L22 24L26 28L30 22"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        opacity="0.4"
+      />
+    </svg>
+
+    <h3 class="inv-empty-state__title">{{ title }}</h3>
+
+    <p v-if="description" class="inv-empty-state__description">
+      {{ description }}
+    </p>
+
+    <div v-if="$slots.action || actionLabel" class="inv-empty-state__action">
+      <slot name="action">
+        <button
+          v-if="actionLabel"
+          type="button"
+          class="inv-empty-state__btn"
+          @click="emit('action')"
+        >
+          {{ actionLabel }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description?: string
+  actionLabel?: string
+}>()
+
+const emit = defineEmits<{
+  action: []
+}>()
+</script>
+
+<style scoped>
+.inv-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-8, 2rem) var(--space-4, 1rem);
+}
+
+.inv-empty-state__icon {
+  color: var(--admin-text-tertiary);
+  margin-bottom: var(--space-4, 1rem);
+  opacity: 0.6;
+}
+
+.inv-empty-state__title {
+  margin: 0;
+  font-size: var(--text-base, 1rem);
+  font-weight: 600;
+  color: var(--admin-text-secondary);
+  line-height: 1.4;
+}
+
+.inv-empty-state__description {
+  margin: var(--space-2, 0.5rem) 0 0;
+  font-size: var(--text-sm, 0.875rem);
+  color: var(--admin-text-tertiary);
+  line-height: 1.5;
+  max-width: 360px;
+}
+
+.inv-empty-state__action {
+  margin-top: var(--space-5, 1.25rem);
+}
+
+.inv-empty-state__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
+  border: none;
+  border-radius: 6px;
+  background: var(--color-primary, #2563eb);
+  color: #fff;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.inv-empty-state__btn:hover {
+  background: color-mix(in srgb, var(--color-primary, #2563eb) 85%, black);
+}
+
+.inv-empty-state__btn:focus-visible {
+  outline: 2px solid var(--admin-focus-ring, #2563eb);
+  outline-offset: 2px;
+}
+</style>