@slexn/codecenter-ui 1.0.0

package/src/components/ui/progress/Progress.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import type { CSSProperties, HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export type ProgressSize = "sm" | "default" | "lg"
+export type ProgressTone = "default" | "success" | "warning" | "destructive"
+export type ProgressValue = number | string | null | undefined
+
+export interface ProgressValueFormatterContext {
+  indeterminate: boolean
+  max: number
+  min: number
+  percent: number
+}
+
+export type ProgressValueFormatter = (
+  value: number,
+  context?: ProgressValueFormatterContext,
+) => number | string
+
+export interface ProgressProps {
+  class?: HTMLAttributes["class"]
+  color?: string
+  indeterminate?: boolean
+  label?: string
+  max?: number
+  min?: number
+  modelValue?: ProgressValue
+  showValue?: boolean
+  size?: ProgressSize
+  tone?: ProgressTone
+  trackColor?: string
+  value?: ProgressValue
+  valueFormatter?: ProgressValueFormatter
+  valueLabel?: string
+}
+
+const props = withDefaults(defineProps<ProgressProps>(), {
+  indeterminate: false,
+  max: 100,
+  min: 0,
+  showValue: false,
+  size: "default",
+  tone: "default",
+})
+
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 1,
+  }),
+)
+
+const domain = computed(() => {
+  let min = normalizeBoundary(props.min, 0)
+  let max = normalizeBoundary(props.max, 100)
+
+  if (min > max) {
+    const nextMin = max
+    max = min
+    min = nextMin
+  }
+
+  if (min === max) {
+    max = min + 1
+  }
+
+  return {
+    max,
+    min,
+  }
+})
+
+const rawValue = computed(() => props.modelValue ?? props.value)
+const numericValue = computed(() => toFiniteNumber(rawValue.value))
+
+const clampedValue = computed(() => {
+  const { max, min } = domain.value
+  const value = numericValue.value ?? min
+
+  return Math.min(max, Math.max(min, value))
+})
+
+const percent = computed(() => {
+  const { max, min } = domain.value
+
+  return ((clampedValue.value - min) / (max - min)) * 100
+})
+
+const normalizedPercent = computed(() =>
+  Math.min(100, Math.max(0, percent.value)),
+)
+
+const valueText = computed(() => {
+  if (props.valueLabel) return props.valueLabel
+  if (props.indeterminate) return "Loading"
+
+  const context = {
+    indeterminate: props.indeterminate,
+    max: domain.value.max,
+    min: domain.value.min,
+    percent: normalizedPercent.value,
+  }
+
+  if (props.valueFormatter) {
+    return String(props.valueFormatter(clampedValue.value, context))
+  }
+
+  return `${numberFormatter.value.format(normalizedPercent.value)}%`
+})
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      header: "mb-1.5 text-xs",
+      track: "h-1.5",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      header: "mb-2.5 text-sm",
+      track: "h-3",
+    }
+  }
+
+  return {
+    header: "mb-2 text-sm",
+    track: "h-2",
+  }
+})
+
+const indicatorToneClass = computed(() => {
+  if (props.color) return ""
+
+  if (props.tone === "success") return "bg-[oklch(0.58_0.15_154)]"
+  if (props.tone === "warning") return "bg-[oklch(0.67_0.17_68)]"
+  if (props.tone === "destructive") return "bg-destructive"
+
+  return "bg-primary"
+})
+
+const state = computed(() => {
+  if (props.indeterminate) return "indeterminate"
+
+  return normalizedPercent.value >= 100 ? "complete" : "loading"
+})
+
+const hasHeader = computed(() => Boolean(props.label || props.showValue))
+const ariaLabel = computed(() => props.label || "Progress")
+
+const trackStyle = computed<CSSProperties>(() => {
+  if (!props.trackColor) return {}
+
+  return {
+    backgroundColor: props.trackColor,
+  }
+})
+
+const indicatorStyle = computed<CSSProperties>(() => {
+  const style: CSSProperties = {}
+
+  if (props.color) {
+    style.backgroundColor = props.color
+  }
+
+  if (!props.indeterminate) {
+    style.transform = `scaleX(${normalizedPercent.value / 100})`
+  }
+
+  return style
+})
+
+function normalizeBoundary(value: number | undefined, fallback: number) {
+  return Number.isFinite(value) ? Number(value) : fallback
+}
+
+function toFiniteNumber(value: ProgressValue) {
+  if (value === null || value === undefined || value === "") return null
+
+  const numberValue = typeof value === "number" ? value : Number(value)
+
+  return Number.isFinite(numberValue) ? numberValue : null
+}
+</script>
+
+<template>
+  <div data-slot="progress" :class="cn('w-full', props.class)">
+    <div
+      v-if="hasHeader"
+      data-slot="progress-header"
+      :class="
+        cn(
+          'flex min-w-0 items-center justify-between gap-3 font-medium text-foreground',
+          sizeClasses.header,
+        )
+      "
+    >
+      <span
+        v-if="props.label"
+        data-slot="progress-label"
+        class="min-w-0 truncate"
+      >
+        {{ props.label }}
+      </span>
+      <span
+        v-if="props.showValue"
+        data-slot="progress-value"
+        class="shrink-0 text-muted-foreground"
+      >
+        {{ valueText }}
+      </span>
+    </div>
+
+    <div
+      data-slot="progress-track"
+      role="progressbar"
+      :aria-label="ariaLabel"
+      :aria-valuemax="props.indeterminate ? undefined : domain.max"
+      :aria-valuemin="props.indeterminate ? undefined : domain.min"
+      :aria-valuenow="props.indeterminate ? undefined : clampedValue"
+      :aria-valuetext="valueText"
+      :class="
+        cn(
+          'relative w-full overflow-hidden rounded-full bg-secondary',
+          sizeClasses.track,
+        )
+      "
+      :data-state="state"
+      :style="trackStyle"
+    >
+      <div
+        data-slot="progress-indicator"
+        :class="
+          cn(
+            'h-full w-full origin-left rounded-full transition-transform duration-300 ease-out',
+            indicatorToneClass,
+          )
+        "
+        :data-indeterminate="props.indeterminate ? 'true' : undefined"
+        :data-state="state"
+        :style="indicatorStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-110%);
+  }
+
+  100% {
+    transform: translateX(260%);
+  }
+}
+
+[data-slot="progress-indicator"][data-indeterminate="true"] {
+  width: 40%;
+  animation: progress-indeterminate 1.25s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="progress-indicator"][data-indeterminate="true"] {
+    transform: translateX(75%);
+    animation: none;
+    opacity: 0.65;
+  }
+}
+</style>

package/src/components/ui/progress/index.ts

@@ -0,0 +1,9 @@
+export { default as Progress } from "./Progress.vue"
+export type {
+  ProgressProps,
+  ProgressSize,
+  ProgressTone,
+  ProgressValue,
+  ProgressValueFormatter,
+  ProgressValueFormatterContext,
+} from "./Progress.vue"