@datametria/vue-components 1.1.1

package/src/components/DatametriaAutocomplete.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="dm-autocomplete" ref="autocompleteRef">
+    <label v-if="label" :for="inputId" class="dm-autocomplete__label">
+      {{ label }}
+      <span v-if="required" class="dm-autocomplete__required">*</span>
+    </label>
+    <div class="dm-autocomplete__wrapper">
+      <input
+        :id="inputId"
+        v-model="searchQuery"
+        type="text"
+        class="dm-autocomplete__input"
+        :class="{ 'dm-autocomplete__input--error': error }"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :required="required"
+        :aria-label="ariaLabel"
+        :aria-expanded="isOpen"
+        :aria-controls="`${inputId}-listbox`"
+        :aria-activedescendant="activeOptionId"
+        role="combobox"
+        autocomplete="off"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
+      <ul
+        v-if="isOpen && filteredOptions.length"
+        :id="`${inputId}-listbox`"
+        class="dm-autocomplete__dropdown"
+        role="listbox"
+      >
+        <li
+          v-for="(option, index) in filteredOptions"
+          :key="index"
+          :id="`${inputId}-option-${index}`"
+          class="dm-autocomplete__option"
+          :class="{ 'dm-autocomplete__option--active': index === activeIndex }"
+          role="option"
+          :aria-selected="index === activeIndex"
+          @click="selectOption(option)"
+          @mouseenter="activeIndex = index"
+        >
+          {{ option }}
+        </li>
+      </ul>
+      <div v-else-if="isOpen && !filteredOptions.length" class="dm-autocomplete__no-results">
+        No results
+      </div>
+    </div>
+    <p v-if="error" class="dm-autocomplete__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  modelValue?: string
+  options: string[]
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  error?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  options: () => [],
+  disabled: false,
+  required: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const inputId = `dm-autocomplete-${Math.random().toString(36).substr(2, 9)}`
+const autocompleteRef = ref<HTMLElement>()
+const searchQuery = ref(props.modelValue)
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+
+const filteredOptions = computed(() => {
+  if (!searchQuery.value) return props.options
+  return props.options.filter(option =>
+    option.toLowerCase().includes(searchQuery.value.toLowerCase())
+  )
+})
+
+const activeOptionId = computed(() =>
+  activeIndex.value >= 0 ? `${inputId}-option-${activeIndex.value}` : undefined
+)
+
+watch(() => props.modelValue, (newValue) => {
+  searchQuery.value = newValue
+})
+
+const handleInput = () => {
+  isOpen.value = true
+  activeIndex.value = -1
+  emit('update:modelValue', searchQuery.value)
+}
+
+const handleFocus = () => {
+  if (!props.disabled) {
+    isOpen.value = true
+  }
+}
+
+const handleBlur = () => {
+  setTimeout(() => {
+    isOpen.value = false
+  }, 200)
+}
+
+const selectOption = (option: string) => {
+  searchQuery.value = option
+  emit('update:modelValue', option)
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!isOpen.value && event.key !== 'Escape') {
+    isOpen.value = true
+    return
+  }
+
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault()
+      activeIndex.value = Math.min(activeIndex.value + 1, filteredOptions.value.length - 1)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      activeIndex.value = Math.max(activeIndex.value - 1, 0)
+      break
+    case 'Enter':
+      event.preventDefault()
+      if (activeIndex.value >= 0) {
+        selectOption(filteredOptions.value[activeIndex.value])
+      }
+      break
+    case 'Escape':
+      isOpen.value = false
+      activeIndex.value = -1
+      break
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (autocompleteRef.value && !autocompleteRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<style scoped>
+.dm-autocomplete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+  position: relative;
+}
+
+.dm-autocomplete__label {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+}
+
+.dm-autocomplete__required {
+  color: var(--dm-error);
+}
+
+.dm-autocomplete__wrapper {
+  position: relative;
+}
+
+.dm-autocomplete__input {
+  width: 100%;
+  min-height: 44px;
+  padding: var(--dm-space-3);
+  border: 1px solid var(--dm-gray-300);
+  border-radius: var(--dm-radius);
+  font-size: var(--dm-text-base);
+  color: var(--dm-text-primary);
+  background: var(--dm-white);
+  transition: var(--dm-transition);
+}
+
+.dm-autocomplete__input::placeholder {
+  color: var(--dm-gray-400);
+}
+
+.dm-autocomplete__input:hover:not(:disabled) {
+  border-color: var(--dm-gray-400);
+}
+
+.dm-autocomplete__input:focus {
+  outline: var(--dm-focus-ring);
+  outline-offset: 0;
+  border-color: var(--dm-primary);
+}
+
+.dm-autocomplete__input:disabled {
+  background: var(--dm-gray-100);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dm-autocomplete__input--error {
+  border-color: var(--dm-error);
+}
+
+.dm-autocomplete__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 240px;
+  overflow-y: auto;
+  background: var(--dm-white);
+  border: 1px solid var(--dm-gray-300);
+  border-radius: var(--dm-radius);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  list-style: none;
+  margin: 0;
+  padding: var(--dm-space-1);
+  z-index: 1000;
+}
+
+.dm-autocomplete__option {
+  padding: var(--dm-space-2) var(--dm-space-3);
+  cursor: pointer;
+  border-radius: var(--dm-radius);
+  transition: var(--dm-transition);
+  color: var(--dm-text-primary);
+}
+
+.dm-autocomplete__option:hover,
+.dm-autocomplete__option--active {
+  background: var(--dm-gray-100);
+}
+
+.dm-autocomplete__no-results {
+  padding: var(--dm-space-3);
+  text-align: center;
+  color: var(--dm-gray-500);
+  font-size: var(--dm-text-sm);
+}
+
+.dm-autocomplete__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-autocomplete__input {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+    color: var(--dm-white);
+  }
+
+  .dm-autocomplete__input:disabled {
+    background: var(--dm-gray-900);
+  }
+
+  .dm-autocomplete__dropdown {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+  }
+
+  .dm-autocomplete__option:hover,
+  .dm-autocomplete__option--active {
+    background: var(--dm-gray-700);
+  }
+}
+</style>

package/src/components/DatametriaAvatar.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    class="dm-avatar"
+    :class="[`dm-avatar--${size}`, { 'dm-avatar--rounded': rounded }]"
+    :aria-label="ariaLabel || name"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt || name"
+      class="dm-avatar__image"
+      @error="handleImageError"
+    />
+    <span v-else class="dm-avatar__initials">{{ initials }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  src?: string
+  name?: string
+  alt?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  rounded?: boolean
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  rounded: false
+})
+
+const imageError = ref(false)
+
+const initials = computed(() => {
+  if (!props.name) return '?'
+  const names = props.name.trim().split(' ')
+  if (names.length === 1) return names[0].charAt(0).toUpperCase()
+  return (names[0].charAt(0) + names[names.length - 1].charAt(0)).toUpperCase()
+})
+
+const handleImageError = () => {
+  imageError.value = true
+}
+</script>
+
+<style scoped>
+.dm-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dm-primary);
+  color: var(--dm-white);
+  font-weight: 600;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+.dm-avatar--sm {
+  width: 32px;
+  height: 32px;
+  font-size: var(--dm-text-xs);
+}
+
+.dm-avatar--md {
+  width: 40px;
+  height: 40px;
+  font-size: var(--dm-text-sm);
+}
+
+.dm-avatar--lg {
+  width: 56px;
+  height: 56px;
+  font-size: var(--dm-text-base);
+}
+
+.dm-avatar--xl {
+  width: 80px;
+  height: 80px;
+  font-size: var(--dm-text-lg);
+}
+
+.dm-avatar--rounded {
+  border-radius: var(--dm-radius);
+}
+
+.dm-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dm-avatar__initials {
+  user-select: none;
+}
+</style>

package/src/components/DatametriaBadge.vue

@@ -0,0 +1,90 @@
+<template>
+  <span
+    class="dm-badge"
+    :class="[`dm-badge--${variant}`, `dm-badge--${size}`]"
+    :aria-label="ariaLabel"
+  >
+    <slot>{{ label }}</slot>
+  </span>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
+  size?: 'sm' | 'md' | 'lg'
+  ariaLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  size: 'md'
+})
+</script>
+
+<style scoped>
+.dm-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  border-radius: 12px;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.dm-badge--sm {
+  padding: 2px 8px;
+  font-size: var(--dm-text-xs);
+  min-height: 20px;
+}
+
+.dm-badge--md {
+  padding: 4px 12px;
+  font-size: var(--dm-text-sm);
+  min-height: 24px;
+}
+
+.dm-badge--lg {
+  padding: 6px 16px;
+  font-size: var(--dm-text-base);
+  min-height: 32px;
+}
+
+.dm-badge--primary {
+  background: var(--dm-primary);
+  color: var(--dm-white);
+}
+
+.dm-badge--secondary {
+  background: var(--dm-secondary);
+  color: var(--dm-white);
+}
+
+.dm-badge--success {
+  background: var(--dm-success);
+  color: var(--dm-white);
+}
+
+.dm-badge--warning {
+  background: var(--dm-warning);
+  color: var(--dm-gray-900);
+}
+
+.dm-badge--error {
+  background: var(--dm-error);
+  color: var(--dm-white);
+}
+
+.dm-badge--info {
+  background: var(--dm-gray-200);
+  color: var(--dm-gray-900);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-badge--info {
+    background: var(--dm-gray-700);
+    color: var(--dm-white);
+  }
+}
+</style>

package/src/components/DatametriaBreadcrumb.vue

@@ -0,0 +1,144 @@
+<template>
+  <nav class="dm-breadcrumb" aria-label="Breadcrumb">
+    <ol class="dm-breadcrumb__list">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="dm-breadcrumb__item"
+      >
+        <a
+          v-if="item.href && index < items.length - 1"
+          :href="item.href"
+          class="dm-breadcrumb__link"
+          @click="handleClick($event, item, index)"
+        >
+          {{ item.label }}
+        </a>
+        <span
+          v-else
+          class="dm-breadcrumb__current"
+          :aria-current="index === items.length - 1 ? 'page' : undefined"
+        >
+          {{ item.label }}
+        </span>
+        <span
+          v-if="index < items.length - 1"
+          class="dm-breadcrumb__separator"
+          aria-hidden="true"
+        >
+          {{ separator }}
+        </span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script setup lang="ts">
+interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+interface Props {
+  items: BreadcrumbItem[]
+  separator?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  separator: '/'
+})
+
+const emit = defineEmits<{
+  click: [item: BreadcrumbItem, index: number]
+}>()
+
+const handleClick = (_event: Event, item: BreadcrumbItem, index: number) => {
+  emit('click', item, index)
+}
+</script>
+
+<style scoped>
+.dm-breadcrumb {
+  display: block;
+}
+
+.dm-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--dm-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dm-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-2);
+}
+
+.dm-breadcrumb__link {
+  color: var(--dm-primary);
+  text-decoration: none;
+  font-size: var(--dm-text-sm);
+  transition: var(--dm-transition);
+  padding: var(--dm-space-1) var(--dm-space-2);
+  border-radius: var(--dm-radius);
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.dm-breadcrumb__link:hover {
+  text-decoration: underline;
+  background: var(--dm-gray-100);
+}
+
+.dm-breadcrumb__link:focus-visible {
+  outline: var(--dm-focus-ring);
+  outline-offset: 2px;
+}
+
+.dm-breadcrumb__current {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+  padding: var(--dm-space-1) var(--dm-space-2);
+}
+
+.dm-breadcrumb__separator {
+  color: var(--dm-gray-400);
+  font-size: var(--dm-text-sm);
+  user-select: none;
+}
+
+@media (max-width: 640px) {
+  .dm-breadcrumb__list {
+    gap: var(--dm-space-1);
+  }
+
+  .dm-breadcrumb__item {
+    gap: var(--dm-space-1);
+  }
+
+  .dm-breadcrumb__link,
+  .dm-breadcrumb__current {
+    font-size: var(--dm-text-xs);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-breadcrumb__link:hover {
+    background: var(--dm-gray-800);
+  }
+
+  .dm-breadcrumb__current {
+    color: var(--dm-white);
+  }
+
+  .dm-breadcrumb__separator {
+    color: var(--dm-gray-600);
+  }
+}
+</style>