@mkatogui/uds-vue 0.2.1

package/src/components/UdsCommandPalette.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, nextTick, useId } from 'vue'
+
+interface Action {
+  id: string
+  label: string
+  group?: string
+  shortcut?: string
+}
+
+interface Props {
+  open?: boolean
+  actions?: Action[]
+  placeholder?: string
+  groups?: string[]
+  recentLimit?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  actions: () => [],
+  placeholder: 'Type a command...',
+  groups: () => [],
+  recentLimit: 5,
+})
+
+const emit = defineEmits<{
+  select: [action: Action]
+  close: []
+}>()
+
+const query = ref('')
+const activeIndex = ref(0)
+const inputRef = ref<HTMLInputElement | null>(null)
+const listId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-command-palette',
+    props.open && 'uds-command-palette--open',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const filteredActions = computed(() => {
+  if (!query.value) return props.actions
+  const q = query.value.toLowerCase()
+  return props.actions.filter((a) => a.label.toLowerCase().includes(q))
+})
+
+function selectAction(action: Action) {
+  emit('select', action)
+  query.value = ''
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % filteredActions.value.length
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value - 1 + filteredActions.value.length) % filteredActions.value.length
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    if (filteredActions.value[activeIndex.value]) {
+      selectAction(filteredActions.value[activeIndex.value])
+    }
+  } else if (e.key === 'Escape') {
+    emit('close')
+  }
+}
+
+function handleGlobalKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    if (!props.open) {
+      // Parent controls open state
+    } else {
+      emit('close')
+    }
+  }
+}
+
+watch(() => props.open, async (isOpen) => {
+  if (isOpen) {
+    await nextTick()
+    inputRef.value?.focus()
+    activeIndex.value = 0
+  }
+})
+
+watch(query, () => {
+  activeIndex.value = 0
+})
+
+onMounted(() => {
+  document.addEventListener('keydown', handleGlobalKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleGlobalKeydown)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="uds-command-palette-overlay" role="presentation" @click.self="emit('close')">
+      <div :class="classes" role="combobox" aria-expanded="true" :aria-owns="listId">
+        <div class="uds-command-palette__input-wrapper">
+          <input
+            ref="inputRef"
+            v-model="query"
+            class="uds-command-palette__input"
+            :placeholder="placeholder"
+            role="searchbox"
+            aria-autocomplete="list"
+            :aria-controls="listId"
+            :aria-activedescendant="filteredActions.length ? `cmd-item-${activeIndex}` : undefined"
+            @keydown="handleKeydown"
+          />
+        </div>
+        <ul :id="listId" class="uds-command-palette__list" role="listbox">
+          <li
+            v-for="(action, i) in filteredActions"
+            :key="action.id"
+            :id="`cmd-item-${i}`"
+            class="uds-command-palette__item"
+            :class="{ 'uds-command-palette__item--active': activeIndex === i }"
+            role="option"
+            :aria-selected="activeIndex === i"
+            @click="selectAction(action)"
+            @mouseenter="activeIndex = i"
+          >
+            <span class="uds-command-palette__label">{{ action.label }}</span>
+            <kbd v-if="action.shortcut" class="uds-command-palette__shortcut">{{ action.shortcut }}</kbd>
+          </li>
+          <li v-if="filteredActions.length === 0" class="uds-command-palette__empty" role="option" aria-disabled="true">
+            No results found
+          </li>
+        </ul>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/src/components/UdsDataTable.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Column {
+  key: string
+  label: string
+  sortable?: boolean
+}
+
+interface Props {
+  variant?: 'basic' | 'sortable' | 'selectable' | 'expandable'
+  density?: 'compact' | 'default' | 'comfortable'
+  columns?: Column[]
+  data?: Record<string, unknown>[]
+  sortable?: boolean
+  selectable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'basic',
+  density: 'default',
+  columns: () => [],
+  data: () => [],
+})
+
+const emit = defineEmits<{
+  sort: [key: string, direction: 'asc' | 'desc']
+  select: [selectedRows: number[]]
+}>()
+
+const sortKey = ref('')
+const sortDir = ref<'asc' | 'desc'>('asc')
+const selectedRows = ref<Set<number>>(new Set())
+
+const classes = computed(() =>
+  [
+    'uds-data-table',
+    `uds-data-table--${props.variant}`,
+    `uds-data-table--${props.density}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const sortedData = computed(() => {
+  if (!sortKey.value) return props.data
+  return [...props.data].sort((a, b) => {
+    const aVal = String(a[sortKey.value] ?? '')
+    const bVal = String(b[sortKey.value] ?? '')
+    const cmp = aVal.localeCompare(bVal)
+    return sortDir.value === 'asc' ? cmp : -cmp
+  })
+})
+
+function handleSort(key: string) {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortDir.value = 'asc'
+  }
+  emit('sort', sortKey.value, sortDir.value)
+}
+
+function toggleRow(index: number) {
+  const next = new Set(selectedRows.value)
+  if (next.has(index)) {
+    next.delete(index)
+  } else {
+    next.add(index)
+  }
+  selectedRows.value = next
+  emit('select', Array.from(next))
+}
+
+function toggleAll() {
+  if (selectedRows.value.size === props.data.length) {
+    selectedRows.value = new Set()
+  } else {
+    selectedRows.value = new Set(props.data.map((_, i) => i))
+  }
+  emit('select', Array.from(selectedRows.value))
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <table class="uds-data-table__table" role="table">
+      <thead>
+        <tr>
+          <th v-if="selectable || variant === 'selectable'" class="uds-data-table__select-all">
+            <input
+              type="checkbox"
+              :checked="selectedRows.size === data.length && data.length > 0"
+              aria-label="Select all rows"
+              @change="toggleAll"
+            />
+          </th>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            scope="col"
+            :aria-sort="sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined"
+            :class="col.sortable || sortable ? 'uds-data-table__th--sortable' : ''"
+          >
+            <button
+              v-if="col.sortable || sortable"
+              class="uds-data-table__sort-btn"
+              @click="handleSort(col.key)"
+            >
+              {{ col.label }}
+              <span v-if="sortKey === col.key" aria-hidden="true">
+                {{ sortDir === 'asc' ? '&#9650;' : '&#9660;' }}
+              </span>
+            </button>
+            <template v-else>{{ col.label }}</template>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, i) in sortedData" :key="i" :class="selectedRows.has(i) ? 'uds-data-table__row--selected' : ''">
+          <td v-if="selectable || variant === 'selectable'">
+            <input
+              type="checkbox"
+              :checked="selectedRows.has(i)"
+              :aria-label="`Select row ${i + 1}`"
+              @change="toggleRow(i)"
+            />
+          </td>
+          <td v-for="col in columns" :key="col.key">
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-if="data.length === 0" class="uds-data-table__empty">
+      <slot name="empty">No data available</slot>
+    </div>
+  </div>
+</template>

package/src/components/UdsDatePicker.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+interface Props {
+  variant?: 'single' | 'range' | 'with-time'
+  size?: 'md' | 'lg'
+  modelValue?: string
+  min?: string
+  max?: string
+  disabled?: boolean
+  label?: string
+  locale?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'single',
+  size: 'md',
+  locale: 'en-US',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const isOpen = ref(false)
+const inputId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-date-picker',
+    `uds-date-picker--${props.variant}`,
+    `uds-date-picker--${props.size}`,
+    isOpen.value && 'uds-date-picker--open',
+    props.disabled && 'uds-date-picker--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const inputType = computed(() => {
+  if (props.variant === 'with-time') return 'datetime-local'
+  return 'date'
+})
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" :for="inputId" class="uds-date-picker__label">{{ label }}</label>
+    <input
+      :id="inputId"
+      class="uds-date-picker__input"
+      :type="inputType"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      :aria-label="label || 'Select date'"
+      role="grid"
+      @input="handleInput"
+      @focus="isOpen = true"
+      @blur="isOpen = false"
+    />
+  </div>
+</template>

package/src/components/UdsDropdown.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted, useId } from 'vue'
+
+interface DropdownItem {
+  label: string
+  value: string
+  disabled?: boolean
+  icon?: string
+}
+
+interface Props {
+  variant?: 'action' | 'context' | 'nav-sub'
+  size?: 'sm' | 'md' | 'lg'
+  items?: DropdownItem[]
+  position?: 'bottom-start' | 'bottom-end'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'action',
+  size: 'md',
+  items: () => [],
+  position: 'bottom-start',
+})
+
+const emit = defineEmits<{
+  select: [value: string]
+}>()
+
+const isOpen = ref(false)
+const menuId = useId()
+const activeIndex = ref(-1)
+const menuRef = ref<HTMLElement | null>(null)
+const itemRefs = ref<(HTMLElement | null)[]>([])
+
+const classes = computed(() =>
+  [
+    'uds-dropdown',
+    `uds-dropdown--${props.variant}`,
+    `uds-dropdown--${props.size}`,
+    isOpen.value && 'uds-dropdown--open',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function toggle() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    activeIndex.value = 0
+  }
+}
+
+function close() {
+  isOpen.value = false
+  activeIndex.value = -1
+}
+
+function selectItem(item: DropdownItem) {
+  if (item.disabled) return
+  emit('select', item.value)
+  close()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (!isOpen.value) return
+  const enabledItems = props.items.filter((i) => !i.disabled)
+
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % enabledItems.length
+    itemRefs.value[activeIndex.value]?.focus()
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value - 1 + enabledItems.length) % enabledItems.length
+    itemRefs.value[activeIndex.value]?.focus()
+  } else if (e.key === 'Escape') {
+    close()
+  } else if (e.key === 'Enter' || e.key === ' ') {
+    e.preventDefault()
+    if (activeIndex.value >= 0) {
+      selectItem(enabledItems[activeIndex.value])
+    }
+  }
+}
+
+function handleClickOutside(e: MouseEvent) {
+  if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
+    close()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div ref="menuRef" :class="classes" @keydown="handleKeydown">
+    <button
+      class="uds-dropdown__trigger"
+      :aria-haspopup="true"
+      :aria-expanded="isOpen"
+      :aria-controls="menuId"
+      @click="toggle"
+    >
+      <slot name="trigger">Menu</slot>
+    </button>
+    <ul
+      v-if="isOpen"
+      :id="menuId"
+      class="uds-dropdown__menu"
+      role="menu"
+    >
+      <li
+        v-for="(item, i) in items"
+        :key="item.value"
+        :ref="(el) => { itemRefs[i] = el as HTMLElement }"
+        class="uds-dropdown__item"
+        role="menuitem"
+        :tabindex="activeIndex === i ? 0 : -1"
+        :aria-disabled="item.disabled || undefined"
+        @click="selectItem(item)"
+      >
+        {{ item.label }}
+      </li>
+    </ul>
+  </div>
+</template>

package/src/components/UdsFileUpload.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  variant?: 'dropzone' | 'button' | 'avatar-upload'
+  size?: 'sm' | 'md' | 'lg'
+  accept?: string
+  maxSize?: number
+  maxFiles?: number
+  multiple?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'dropzone',
+  size: 'md',
+  maxFiles: 1,
+})
+
+const emit = defineEmits<{
+  upload: [files: File[]]
+  remove: [file: File]
+  error: [message: string]
+}>()
+
+const dragOver = ref(false)
+const uploading = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+const classes = computed(() =>
+  [
+    'uds-file-upload',
+    `uds-file-upload--${props.variant}`,
+    `uds-file-upload--${props.size}`,
+    dragOver.value && 'uds-file-upload--drag-over',
+    uploading.value && 'uds-file-upload--uploading',
+    props.disabled && 'uds-file-upload--disabled',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function validateFiles(files: File[]): File[] {
+  return files.filter((file) => {
+    if (props.maxSize && file.size > props.maxSize) {
+      emit('error', `File "${file.name}" exceeds max size`)
+      return false
+    }
+    return true
+  })
+}
+
+function handleFiles(fileList: FileList | null) {
+  if (!fileList) return
+  let files = Array.from(fileList)
+  if (props.maxFiles) {
+    files = files.slice(0, props.maxFiles)
+  }
+  const valid = validateFiles(files)
+  if (valid.length) {
+    emit('upload', valid)
+  }
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  dragOver.value = false
+  if (props.disabled) return
+  handleFiles(e.dataTransfer?.files || null)
+}
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  if (!props.disabled) dragOver.value = true
+}
+
+function handleDragLeave() {
+  dragOver.value = false
+}
+
+function openFileDialog() {
+  fileInputRef.value?.click()
+}
+
+function handleInputChange(e: Event) {
+  const target = e.target as HTMLInputElement
+  handleFiles(target.files)
+  target.value = ''
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <input
+      ref="fileInputRef"
+      type="file"
+      class="uds-file-upload__input"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      aria-label="Upload file"
+      @change="handleInputChange"
+    />
+
+    <div
+      v-if="variant === 'dropzone'"
+      class="uds-file-upload__dropzone"
+      role="button"
+      tabindex="0"
+      :aria-disabled="disabled || undefined"
+      aria-live="polite"
+      @drop="handleDrop"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @click="openFileDialog"
+      @keydown.enter="openFileDialog"
+      @keydown.space.prevent="openFileDialog"
+    >
+      <slot>
+        <p class="uds-file-upload__text">Drag and drop files here, or click to browse</p>
+      </slot>
+    </div>
+
+    <button
+      v-else-if="variant === 'button'"
+      class="uds-file-upload__button"
+      :disabled="disabled"
+      @click="openFileDialog"
+    >
+      <slot>Choose file</slot>
+    </button>
+
+    <div
+      v-else-if="variant === 'avatar-upload'"
+      class="uds-file-upload__avatar"
+      role="button"
+      tabindex="0"
+      :aria-disabled="disabled || undefined"
+      @click="openFileDialog"
+      @keydown.enter="openFileDialog"
+      @keydown.space.prevent="openFileDialog"
+    >
+      <slot>
+        <span class="uds-file-upload__avatar-placeholder" aria-hidden="true">+</span>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/UdsFooter.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'simple' | 'multi-column' | 'newsletter' | 'mega-footer'
+  size?: 'standard' | 'compact'
+  copyright?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'simple',
+  size: 'standard',
+})
+
+const classes = computed(() =>
+  [
+    'uds-footer',
+    `uds-footer--${props.variant}`,
+    `uds-footer--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <footer :class="classes" aria-label="Site footer">
+    <nav class="uds-footer__columns" aria-label="Footer navigation">
+      <slot />
+    </nav>
+    <div v-if="variant === 'newsletter'" class="uds-footer__newsletter">
+      <slot name="newsletter" />
+    </div>
+    <div class="uds-footer__legal">
+      <slot name="legal" />
+      <p v-if="copyright" class="uds-footer__copyright">{{ copyright }}</p>
+    </div>
+  </footer>
+</template>