feat(frontend): implement meter component with accessibility features

Author: Lasim

services/frontend/src/components/ui/ds-meter/Meter.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed, provide, ref } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface MeterProps {
+  /** Current value of the meter */
+  value: number
+  /** Minimum value (default: 0) */
+  min?: number
+  /** Maximum value (default: 100) */
+  max?: number
+  /** Custom locale for formatting (e.g., 'en-US', 'de-DE') */
+  locale?: string
+  /** Intl.NumberFormat options for custom formatting */
+  format?: Intl.NumberFormatOptions
+  /** Custom function to generate aria-valuetext */
+  getAriaValueText?: (value: number, min: number, max: number) => string
+  /** Additional CSS classes */
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<MeterProps>(), {
+  min: 0,
+  max: 100,
+  locale: 'en-US',
+})
+
+// Label ID management for accessibility
+const labelId = ref<string | undefined>(undefined)
+
+// Format the value for display
+const formattedValue = computed(() => {
+  if (props.format) {
+    return new Intl.NumberFormat(props.locale, props.format).format(props.value)
+  }
+  // Default: treat as percentage
+  return new Intl.NumberFormat(props.locale, {
+    style: 'percent',
+    maximumFractionDigits: 0,
+  }).format(props.value / 100)
+})
+
+// Generate aria-valuetext
+const ariaValueText = computed(() => {
+  if (props.getAriaValueText) {
+    return props.getAriaValueText(props.value, props.min, props.max)
+  }
+  return formattedValue.value
+})
+
+// Provide context for child components
+provide('meter', {
+  value: computed(() => props.value),
+  min: computed(() => props.min),
+  max: computed(() => props.max),
+  formattedValue,
+  labelId,
+  setLabelId: (id: string | undefined) => {
+    labelId.value = id
+  },
+})
+</script>
+
+<template>
+  <div
+    role="meter"
+    :aria-valuenow="value"
+    :aria-valuemin="min"
+    :aria-valuemax="max"
+    :aria-valuetext="ariaValueText"
+    :aria-labelledby="labelId"
+    :class="cn('relative', props.class)"
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/ds-meter/MeterIndicator.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed, inject } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface MeterIndicatorProps {
+  /** Additional CSS classes */
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<MeterIndicatorProps>()
+
+// Inject meter context
+const meterContext = inject<{
+  value: { value: number }
+  min: { value: number }
+  max: { value: number }
+}>('meter')
+
+if (!meterContext) {
+  throw new Error('MeterIndicator must be used within a Meter component')
+}
+
+// Calculate percentage width
+const percentageWidth = computed(() => {
+  const { value, min, max } = meterContext
+  return ((value.value - min.value) * 100) / (max.value - min.value)
+})
+</script>
+
+<template>
+  <div
+    :class="cn('h-full bg-primary transition-all', props.class)"
+    :style="{
+      width: `${percentageWidth}%`,
+    }"
+  />
+</template>

services/frontend/src/components/ui/ds-meter/MeterLabel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject, onMounted, onUnmounted } from 'vue'
+import { useId } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+export interface MeterLabelProps {
+  /** Optional ID for the label (auto-generated if not provided) */
+  id?: string
+  /** Additional CSS classes */
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<MeterLabelProps>()
+
+// Inject meter context
+const meterContext = inject<{
+  setLabelId: (id: string | undefined) => void
+}>('meter')
+
+if (!meterContext) {
+  throw new Error('MeterLabel must be used within a Meter component')
+}
+
+// Generate or use provided ID
+const labelId = props.id || useId()
+
+// Register label ID with meter on mount
+onMounted(() => {
+  meterContext.setLabelId(labelId)
+})
+
+// Cleanup on unmount
+onUnmounted(() => {
+  meterContext.setLabelId(undefined)
+})
+</script>
+
+<template>
+  <span
+    :id="labelId"
+    :class="cn('text-sm font-medium leading-none', props.class)"
+  >
+    <slot />
+  </span>
+</template>

services/frontend/src/components/ui/ds-meter/MeterTrack.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface MeterTrackProps {
+  /** Additional CSS classes */
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<MeterTrackProps>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

services/frontend/src/components/ui/ds-meter/MeterValue.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { inject } from 'vue'
+import { cn } from '@/lib/utils'
+
+export interface MeterValueProps {
+  /** Additional CSS classes */
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<MeterValueProps>()
+
+// Inject meter context
+const meterContext = inject<{
+  value: { value: number }
+  formattedValue: { value: string }
+}>('meter')
+
+if (!meterContext) {
+  throw new Error('MeterValue must be used within a Meter component')
+}
+</script>
+
+<template>
+  <span
+    aria-hidden="true"
+    :class="cn('text-sm font-medium', props.class)"
+  >
+    <slot
+      :formatted-value="meterContext.formattedValue.value"
+      :value="meterContext.value.value"
+    >
+      {{ meterContext.formattedValue.value }}
+    </slot>
+  </span>
+</template>

services/frontend/src/components/ui/ds-meter/index.ts

@@ -0,0 +1,5 @@
+export { default as DsMeter } from './Meter.vue'
+export { default as DsMeterTrack } from './MeterTrack.vue'
+export { default as DsMeterIndicator } from './MeterIndicator.vue'
+export { default as DsMeterLabel } from './MeterLabel.vue'
+export { default as DsMeterValue } from './MeterValue.vue'