AK Progress

1<script setup lang="ts">
2import { computed } from 'vue'
3import type { CSSProperties } from 'vue'
4import type { AkProgressVariant } from './types'
5 
6import '@yunyoujun/ak-ui'
7 
8const props = withDefaults(defineProps<{
9  label?: string
10  max?: number
11  min?: number
12  value?: number
13  valueLabel?: string
14  variant?: AkProgressVariant
15}>(), {
16  label: 'Progress',
17  max: 100,
18  min: 0,
19  value: 0,
20  valueLabel: '',
21  variant: 'default',
22})
23 
24const normalizedValue = computed(() => Math.min(props.max, Math.max(props.min, props.value)))
25const percentage = computed(() => {
26  const range = props.max - props.min
27  return range > 0 ? ((normalizedValue.value - props.min) / range) * 100 : 0
28})
29const progressStyle = computed(() => ({
30  '--ak-progress-value': `${percentage.value}%`,
31}) as CSSProperties)
32</script>
33 
34<template>
35  <div
36    class="ak-progress"
37    data-slot="ak-progress"
38    role="progressbar"
39    :aria-label="label"
40    :aria-valuemax="max"
41    :aria-valuemin="min"
42    :aria-valuenow="normalizedValue"
43    :class="variant !== 'default' && `ak-progress--${variant}`"
44    :data-variant="variant"
45    :style="progressStyle"
46  >
47    <div class="ak-progress__header">
48      <span><slot name="label">{{ label }}</slot></span>
49      <span class="ak-progress__value"><slot name="value">{{ valueLabel || `${Math.round(percentage)}%` }}</slot></span>
50    </div>
51    <div class="ak-progress__track"><span class="ak-progress__fill" /></div>
52  </div>
53</template>