@mkatogui/uds-vue 0.2.1

package/src/components/UdsSideNav.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface NavItem {
+  label: string
+  href?: string
+  icon?: string
+  active?: boolean
+  children?: NavItem[]
+}
+
+interface Section {
+  title: string
+  items: NavItem[]
+}
+
+interface Props {
+  variant?: 'default' | 'collapsed' | 'with-sections'
+  collapsed?: boolean
+  items?: NavItem[]
+  sections?: Section[]
+  activeItem?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  items: () => [],
+  sections: () => [],
+})
+
+const emit = defineEmits<{
+  navigate: [href: string]
+}>()
+
+const classes = computed(() =>
+  [
+    'uds-side-nav',
+    `uds-side-nav--${props.variant}`,
+    props.collapsed && 'uds-side-nav--collapsed',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleNavigate(href: string) {
+  emit('navigate', href)
+}
+</script>
+
+<template>
+  <nav :class="classes" aria-label="Side navigation">
+    <template v-if="variant === 'with-sections' && sections.length">
+      <div v-for="(section, si) in sections" :key="si" class="uds-side-nav__section">
+        <h3 class="uds-side-nav__section-title">{{ section.title }}</h3>
+        <ul class="uds-side-nav__list">
+          <li v-for="(item, i) in section.items" :key="i" class="uds-side-nav__item">
+            <a
+              :href="item.href || '#'"
+              class="uds-side-nav__link"
+              :class="{ 'uds-side-nav__link--active': item.active || item.href === activeItem }"
+              :aria-current="item.active || item.href === activeItem ? 'page' : undefined"
+              @click.prevent="handleNavigate(item.href || '')"
+            >
+              <span v-if="item.icon" class="uds-side-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+              <span v-if="!collapsed" class="uds-side-nav__label">{{ item.label }}</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </template>
+    <template v-else>
+      <ul class="uds-side-nav__list">
+        <li v-for="(item, i) in items" :key="i" class="uds-side-nav__item">
+          <a
+            :href="item.href || '#'"
+            class="uds-side-nav__link"
+            :class="{ 'uds-side-nav__link--active': item.active || item.href === activeItem }"
+            :aria-current="item.active || item.href === activeItem ? 'page' : undefined"
+            :aria-expanded="item.children?.length ? undefined : undefined"
+            @click.prevent="handleNavigate(item.href || '')"
+          >
+            <span v-if="item.icon" class="uds-side-nav__icon" aria-hidden="true">{{ item.icon }}</span>
+            <span v-if="!collapsed" class="uds-side-nav__label">{{ item.label }}</span>
+          </a>
+          <ul v-if="item.children?.length && !collapsed" class="uds-side-nav__sublist">
+            <li v-for="(child, ci) in item.children" :key="ci" class="uds-side-nav__subitem">
+              <a
+                :href="child.href || '#'"
+                class="uds-side-nav__sublink"
+                :class="{ 'uds-side-nav__sublink--active': child.active || child.href === activeItem }"
+                :aria-current="child.active || child.href === activeItem ? 'page' : undefined"
+                @click.prevent="handleNavigate(child.href || '')"
+              >
+                {{ child.label }}
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </template>
+  </nav>
+</template>

package/src/components/UdsSkeleton.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'text' | 'card' | 'avatar' | 'table'
+  size?: 'sm' | 'md' | 'lg'
+  lines?: number
+  animated?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'text',
+  size: 'md',
+  lines: 3,
+  animated: true,
+})
+
+const classes = computed(() =>
+  [
+    'uds-skeleton',
+    `uds-skeleton--${props.variant}`,
+    `uds-skeleton--${props.size}`,
+    props.animated && 'uds-skeleton--animated',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes" aria-busy="true" aria-hidden="true">
+    <template v-if="variant === 'text'">
+      <div v-for="i in lines" :key="i" class="uds-skeleton__line" />
+    </template>
+    <template v-else-if="variant === 'avatar'">
+      <div class="uds-skeleton__circle" />
+    </template>
+    <template v-else-if="variant === 'card'">
+      <div class="uds-skeleton__image" />
+      <div class="uds-skeleton__line" />
+      <div class="uds-skeleton__line uds-skeleton__line--short" />
+    </template>
+    <template v-else-if="variant === 'table'">
+      <div v-for="i in lines" :key="i" class="uds-skeleton__row">
+        <div class="uds-skeleton__cell" />
+        <div class="uds-skeleton__cell" />
+        <div class="uds-skeleton__cell" />
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/UdsSocialProof.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Logo {
+  src: string
+  alt: string
+}
+
+interface Stat {
+  value: string
+  label: string
+}
+
+interface Props {
+  variant?: 'logo-strip' | 'stats-counter' | 'testimonial-mini' | 'combined'
+  size?: 'standard' | 'compact'
+  logos?: Logo[]
+  stats?: Stat[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'logo-strip',
+  size: 'standard',
+  logos: () => [],
+  stats: () => [],
+})
+
+const classes = computed(() =>
+  [
+    'uds-social-proof',
+    `uds-social-proof--${props.variant}`,
+    `uds-social-proof--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <div v-if="logos.length" class="uds-social-proof__logos">
+      <img
+        v-for="(logo, i) in logos"
+        :key="i"
+        :src="logo.src"
+        :alt="logo.alt"
+        class="uds-social-proof__logo"
+      />
+    </div>
+    <div v-if="stats.length" class="uds-social-proof__stats">
+      <div v-for="(stat, i) in stats" :key="i" class="uds-social-proof__stat">
+        <span class="uds-social-proof__stat-value">{{ stat.value }}</span>
+        <span class="uds-social-proof__stat-label">{{ stat.label }}</span>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>

package/src/components/UdsTabs.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+interface TabItem {
+  label: string
+  disabled?: boolean
+}
+
+interface Props {
+  variant?: 'line' | 'pill' | 'segmented'
+  size?: 'sm' | 'md' | 'lg'
+  tabs: TabItem[]
+  defaultActive?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'line',
+  size: 'md',
+  defaultActive: 0,
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+}>()
+
+const activeTab = ref(props.defaultActive)
+const baseId = useId()
+const tabRefs = ref<(HTMLElement | null)[]>([])
+
+const classes = computed(() =>
+  [
+    'uds-tabs',
+    `uds-tabs--${props.variant}`,
+    `uds-tabs--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function selectTab(index: number) {
+  if (props.tabs[index]?.disabled) return
+  activeTab.value = index
+  emit('change', index)
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  const enabledIndices = props.tabs
+    .map((t, i) => (t.disabled ? -1 : i))
+    .filter((i) => i >= 0)
+  const currentPos = enabledIndices.indexOf(activeTab.value)
+  let nextIndex: number | undefined
+
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    nextIndex = enabledIndices[(currentPos + 1) % enabledIndices.length]
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    nextIndex = enabledIndices[(currentPos - 1 + enabledIndices.length) % enabledIndices.length]
+  } else if (e.key === 'Home') {
+    e.preventDefault()
+    nextIndex = enabledIndices[0]
+  } else if (e.key === 'End') {
+    e.preventDefault()
+    nextIndex = enabledIndices[enabledIndices.length - 1]
+  }
+
+  if (nextIndex !== undefined) {
+    selectTab(nextIndex)
+    tabRefs.value[nextIndex]?.focus()
+  }
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div class="uds-tabs__list" role="tablist" aria-orientation="horizontal" @keydown="handleKeydown">
+      <button
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :ref="(el) => { tabRefs[i] = el as HTMLElement }"
+        class="uds-tabs__trigger"
+        role="tab"
+        :id="`${baseId}-tab-${i}`"
+        :aria-selected="activeTab === i"
+        :aria-controls="`${baseId}-panel-${i}`"
+        :tabindex="activeTab === i ? 0 : -1"
+        :disabled="tab.disabled"
+        @click="selectTab(i)"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+    <div
+      v-for="(tab, i) in tabs"
+      :key="i"
+      class="uds-tabs__panel"
+      role="tabpanel"
+      :id="`${baseId}-panel-${i}`"
+      :aria-labelledby="`${baseId}-tab-${i}`"
+      :hidden="activeTab !== i"
+      :tabindex="0"
+    >
+      <slot :name="`tab-${i}`" />
+    </div>
+  </div>
+</template>

package/src/components/UdsTestimonial.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  variant?: 'quote-card' | 'video' | 'metric' | 'carousel'
+  size?: 'sm' | 'md' | 'lg'
+  quote?: string
+  name?: string
+  title?: string
+  company?: string
+  avatar?: string
+  rating?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'quote-card',
+  size: 'md',
+})
+
+const classes = computed(() =>
+  [
+    'uds-testimonial',
+    `uds-testimonial--${props.variant}`,
+    `uds-testimonial--${props.size}`,
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+</script>
+
+<template>
+  <figure :class="classes">
+    <blockquote v-if="quote" class="uds-testimonial__quote">
+      <p>{{ quote }}</p>
+    </blockquote>
+    <slot />
+    <figcaption class="uds-testimonial__attribution">
+      <img
+        v-if="avatar"
+        :src="avatar"
+        :alt="`Photo of ${name || ''}`"
+        class="uds-testimonial__avatar"
+      />
+      <div class="uds-testimonial__info">
+        <cite v-if="name" class="uds-testimonial__name">{{ name }}</cite>
+        <span v-if="title || company" class="uds-testimonial__role">
+          {{ [title, company].filter(Boolean).join(', ') }}
+        </span>
+      </div>
+      <div v-if="rating" class="uds-testimonial__rating" :aria-label="`${rating} out of 5 stars`">
+        <span v-for="i in 5" :key="i" :class="i <= rating ? 'uds-testimonial__star--filled' : 'uds-testimonial__star'" aria-hidden="true">
+          &#9733;
+        </span>
+      </div>
+    </figcaption>
+  </figure>
+</template>

package/src/components/UdsToast.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+interface Props {
+  variant?: 'success' | 'error' | 'warning' | 'info' | 'neutral'
+  size?: 'sm' | 'md' | 'lg'
+  message?: string
+  duration?: number
+  action?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+  size: 'md',
+  duration: 5000,
+})
+
+const emit = defineEmits<{
+  dismiss: []
+  action: []
+}>()
+
+const visible = ref(true)
+
+const classes = computed(() =>
+  [
+    'uds-toast',
+    `uds-toast--${props.variant}`,
+    `uds-toast--${props.size}`,
+    visible.value && 'uds-toast--visible',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+const toastRole = computed(() =>
+  props.variant === 'error' || props.variant === 'warning' ? 'alert' : 'status'
+)
+
+function dismiss() {
+  visible.value = false
+  emit('dismiss')
+}
+
+onMounted(() => {
+  if (props.duration > 0) {
+    setTimeout(dismiss, props.duration)
+  }
+})
+</script>
+
+<template>
+  <div v-if="visible" :class="classes" :role="toastRole">
+    <p class="uds-toast__message">
+      <slot>{{ message }}</slot>
+    </p>
+    <button
+      v-if="action"
+      class="uds-toast__action"
+      @click="emit('action')"
+    >
+      {{ action }}
+    </button>
+    <button class="uds-toast__dismiss" aria-label="Dismiss notification" @click="dismiss">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+</template>

package/src/components/UdsToggle.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+interface Props {
+  variant?: 'standard' | 'with-label'
+  checked?: boolean
+  disabled?: boolean
+  label?: string
+  modelValue?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'standard',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  change: [value: boolean]
+}>()
+
+const toggleId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-toggle',
+    `uds-toggle--${props.variant}`,
+    props.disabled && 'uds-toggle--disabled',
+    (props.modelValue ?? props.checked) && 'uds-toggle--on',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function handleClick() {
+  if (props.disabled) return
+  const next = !(props.modelValue ?? props.checked)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <button
+      :id="toggleId"
+      type="button"
+      role="switch"
+      class="uds-toggle__track"
+      :aria-checked="modelValue ?? checked ?? false"
+      :aria-label="label"
+      :disabled="disabled"
+      @click="handleClick"
+    >
+      <span class="uds-toggle__thumb" aria-hidden="true" />
+    </button>
+    <label v-if="variant === 'with-label' && label" :for="toggleId" class="uds-toggle__label">
+      {{ label }}
+    </label>
+  </div>
+</template>

package/src/components/UdsTooltip.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+interface Props {
+  variant?: 'simple' | 'rich'
+  size?: 'sm' | 'md'
+  content?: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'simple',
+  size: 'sm',
+  position: 'top',
+})
+
+const visible = ref(false)
+const tooltipId = useId()
+
+const classes = computed(() =>
+  [
+    'uds-tooltip',
+    `uds-tooltip--${props.variant}`,
+    `uds-tooltip--${props.size}`,
+    `uds-tooltip--${props.position}`,
+    visible.value && 'uds-tooltip--visible',
+  ]
+    .filter(Boolean)
+    .join(' ')
+)
+
+function show() {
+  visible.value = true
+}
+
+function hide() {
+  visible.value = false
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <div
+      class="uds-tooltip__trigger"
+      :aria-describedby="tooltipId"
+      @mouseenter="show"
+      @mouseleave="hide"
+      @focusin="show"
+      @focusout="hide"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="visible"
+      :id="tooltipId"
+      role="tooltip"
+      class="uds-tooltip__content"
+    >
+      <slot name="content">{{ content }}</slot>
+    </div>
+  </div>
+</template>

package/src/index.ts

@@ -0,0 +1,32 @@
+export { default as UdsButton } from './components/UdsButton.vue'
+export { default as UdsNavbar } from './components/UdsNavbar.vue'
+export { default as UdsHero } from './components/UdsHero.vue'
+export { default as UdsCard } from './components/UdsCard.vue'
+export { default as UdsPricing } from './components/UdsPricing.vue'
+export { default as UdsSocialProof } from './components/UdsSocialProof.vue'
+export { default as UdsTestimonial } from './components/UdsTestimonial.vue'
+export { default as UdsFooter } from './components/UdsFooter.vue'
+export { default as UdsCodeBlock } from './components/UdsCodeBlock.vue'
+export { default as UdsModal } from './components/UdsModal.vue'
+export { default as UdsInput } from './components/UdsInput.vue'
+export { default as UdsSelect } from './components/UdsSelect.vue'
+export { default as UdsCheckbox } from './components/UdsCheckbox.vue'
+export { default as UdsRadio } from './components/UdsRadio.vue'
+export { default as UdsToggle } from './components/UdsToggle.vue'
+export { default as UdsAlert } from './components/UdsAlert.vue'
+export { default as UdsBadge } from './components/UdsBadge.vue'
+export { default as UdsTabs } from './components/UdsTabs.vue'
+export { default as UdsAccordion } from './components/UdsAccordion.vue'
+export { default as UdsBreadcrumb } from './components/UdsBreadcrumb.vue'
+export { default as UdsTooltip } from './components/UdsTooltip.vue'
+export { default as UdsDropdown } from './components/UdsDropdown.vue'
+export { default as UdsAvatar } from './components/UdsAvatar.vue'
+export { default as UdsSkeleton } from './components/UdsSkeleton.vue'
+export { default as UdsToast } from './components/UdsToast.vue'
+export { default as UdsPagination } from './components/UdsPagination.vue'
+export { default as UdsDataTable } from './components/UdsDataTable.vue'
+export { default as UdsDatePicker } from './components/UdsDatePicker.vue'
+export { default as UdsCommandPalette } from './components/UdsCommandPalette.vue'
+export { default as UdsProgress } from './components/UdsProgress.vue'
+export { default as UdsSideNav } from './components/UdsSideNav.vue'
+export { default as UdsFileUpload } from './components/UdsFileUpload.vue'