@slexn/codecenter-ui 1.0.0

package/src/components/ui/input/types.ts

@@ -0,0 +1,34 @@
+import type { Component, HTMLAttributes, InputHTMLAttributes } from "vue"
+
+export type InputModelValue = string | number | FileList | null
+export type InputIconPosition = "start" | "end"
+
+export interface InputControlProps {
+  class?: HTMLAttributes["class"]
+  defaultValue?: string | number
+  disabled?: boolean
+  icon?: Component
+  iconClass?: HTMLAttributes["class"]
+  iconPosition?: InputIconPosition
+  id?: string
+  inputClass?: HTMLAttributes["class"]
+  invalid?: boolean
+  modelValue?: InputModelValue
+  placeholder?: string
+  readonly?: boolean
+  type?: InputHTMLAttributes["type"]
+}
+
+export interface InputProps extends InputControlProps {
+  description?: string
+  descriptionClass?: HTMLAttributes["class"]
+  error?: string | boolean
+  field?: boolean
+  fieldClass?: HTMLAttributes["class"]
+  fieldGroup?: boolean
+  groupClass?: HTMLAttributes["class"]
+  label?: string
+  labelClass?: HTMLAttributes["class"]
+  message?: string
+  messageClass?: HTMLAttributes["class"]
+}

package/src/components/ui/kpi-card/KpiCard.vue

@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import type { Component, HTMLAttributes } from "vue"
+import { ArrowDownRightIcon, ArrowUpRightIcon, MinusIcon } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+export type KpiCardSize = "sm" | "default" | "lg"
+export type KpiCardTone = "default" | "success" | "warning" | "danger" | "info"
+export type KpiCardTrend = "up" | "down" | "neutral"
+export type KpiCardValue = number | string | null | undefined
+export type KpiCardValueFormatter = (value: number | string) => number | string
+
+export interface KpiCardProps {
+  class?: HTMLAttributes["class"]
+  description?: string
+  emptyLabel?: string
+  loading?: boolean
+  size?: KpiCardSize
+  summary?: string
+  title?: string
+  tone?: KpiCardTone
+  trend?: KpiCardTrend
+  trendLabel?: string
+  trendValue?: number | string | null
+  value?: KpiCardValue
+  valueFormatter?: KpiCardValueFormatter
+}
+
+const props = withDefaults(defineProps<KpiCardProps>(), {
+  emptyLabel: "No data",
+  size: "default",
+  tone: "default",
+})
+
+const slots = useSlots()
+
+const numberFormatter = computed(() =>
+  new Intl.NumberFormat(undefined, {
+    maximumFractionDigits: 2,
+  }),
+)
+
+const sizeClasses = computed(() => {
+  if (props.size === "sm") {
+    return {
+      description: "text-xs",
+      icon: "size-7",
+      root: "gap-2.5 p-3",
+      title: "text-xs",
+      trend: "text-[11px]",
+      value: "text-xl",
+    }
+  }
+
+  if (props.size === "lg") {
+    return {
+      description: "text-sm",
+      icon: "size-10",
+      root: "gap-4 p-5",
+      title: "text-sm",
+      trend: "text-xs",
+      value: "text-3xl",
+    }
+  }
+
+  return {
+    description: "text-sm",
+    icon: "size-8",
+    root: "gap-3 p-4",
+    title: "text-sm",
+    trend: "text-xs",
+    value: "text-2xl",
+  }
+})
+
+const rootClass = computed(() =>
+  cn(
+    "relative flex min-w-0 flex-col rounded-lg border bg-card text-card-foreground shadow-xs transition-colors",
+    sizeClasses.value.root,
+    props.class,
+  ),
+)
+
+const trendDirection = computed<KpiCardTrend>(() => props.trend ?? "neutral")
+
+const trendIcon = computed<Component>(() => {
+  if (trendDirection.value === "up") return ArrowUpRightIcon
+  if (trendDirection.value === "down") return ArrowDownRightIcon
+
+  return MinusIcon
+})
+
+const hasTrendValue = computed(() => hasDisplayValue(props.trendValue))
+
+const hasTrend = computed(() =>
+  Boolean(props.trend || props.trendLabel || hasTrendValue.value),
+)
+
+const hasFooter = computed(() =>
+  Boolean(slots.footer || props.summary || hasTrend.value),
+)
+
+const formattedValue = computed(() => {
+  const value = props.value
+
+  if (!hasDisplayValue(value)) return props.emptyLabel
+  if (props.valueFormatter) return props.valueFormatter(value)
+  if (typeof value === "number") return numberFormatter.value.format(value)
+
+  return value
+})
+
+const formattedTrendValue = computed(() => {
+  const value = props.trendValue
+
+  if (!hasDisplayValue(value)) return ""
+  if (typeof value === "number") return numberFormatter.value.format(value)
+
+  return value
+})
+
+const trendAccessibleLabel = computed(() =>
+  [formattedTrendValue.value, props.trendLabel]
+    .filter((part) => Boolean(part))
+    .join(" "),
+)
+
+const effectiveTrendTone = computed<KpiCardTone>(() => {
+  if (props.tone !== "default") return props.tone
+  if (trendDirection.value === "up") return "success"
+  if (trendDirection.value === "down") return "danger"
+
+  return "default"
+})
+
+const iconClass = computed(() =>
+  cn(
+    "inline-flex shrink-0 items-center justify-center rounded-md border bg-muted/60",
+    sizeClasses.value.icon,
+    toneTextClass(props.tone),
+  ),
+)
+
+const trendClass = computed(() =>
+  cn(
+    "inline-flex min-h-6 w-fit items-center gap-1 rounded-md border px-1.5 font-medium leading-none",
+    sizeClasses.value.trend,
+    tonePillClass(effectiveTrendTone.value),
+  ),
+)
+
+function hasDisplayValue(value: KpiCardValue): value is number | string {
+  return value !== null && value !== undefined && value !== ""
+}
+
+function toneTextClass(tone: KpiCardTone) {
+  const classes: Record<KpiCardTone, string> = {
+    danger: "text-red-600 dark:text-red-400",
+    default: "text-muted-foreground",
+    info: "text-sky-600 dark:text-sky-400",
+    success: "text-emerald-600 dark:text-emerald-400",
+    warning: "text-amber-600 dark:text-amber-400",
+  }
+
+  return classes[tone]
+}
+
+function tonePillClass(tone: KpiCardTone) {
+  const classes: Record<KpiCardTone, string> = {
+    danger: "border-red-500/20 bg-red-500/10 text-red-700 dark:text-red-300",
+    default: "border-border bg-muted/50 text-muted-foreground",
+    info: "border-sky-500/20 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+    success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+    warning: "border-amber-500/25 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  }
+
+  return classes[tone]
+}
+</script>
+
+<template>
+  <article
+    data-slot="kpi-card"
+    :data-size="props.size"
+    :data-tone="props.tone"
+    :aria-busy="props.loading ? 'true' : undefined"
+    :class="rootClass"
+  >
+    <div
+      v-if="props.loading"
+      data-slot="kpi-card-loading"
+      class="flex flex-col gap-3"
+    >
+      <div class="flex items-start justify-between gap-3">
+        <div class="h-3.5 w-24 rounded-sm bg-muted" />
+        <div :class="cn('rounded-md border bg-muted/60', sizeClasses.icon)" />
+      </div>
+      <div class="h-8 w-32 rounded-sm bg-muted" />
+      <div class="h-3 w-40 rounded-sm bg-muted" />
+    </div>
+
+    <template v-else>
+      <div class="flex min-w-0 items-start justify-between gap-3">
+        <div class="min-w-0">
+          <p
+            v-if="$slots.title || props.title"
+            data-slot="kpi-card-title"
+            :class="cn('truncate font-medium text-muted-foreground', sizeClasses.title)"
+          >
+            <slot name="title">{{ props.title }}</slot>
+          </p>
+          <div
+            data-slot="kpi-card-value"
+            :class="cn('mt-2 truncate font-semibold leading-none tabular-nums', sizeClasses.value)"
+          >
+            <slot name="value">{{ formattedValue }}</slot>
+          </div>
+        </div>
+
+        <div
+          v-if="$slots.icon"
+          data-slot="kpi-card-icon"
+          :class="iconClass"
+        >
+          <slot name="icon" />
+        </div>
+      </div>
+
+      <p
+        v-if="$slots.description || props.description"
+        data-slot="kpi-card-description"
+        :class="cn('leading-relaxed text-muted-foreground', sizeClasses.description)"
+      >
+        <slot name="description">{{ props.description }}</slot>
+      </p>
+
+      <div
+        v-if="hasFooter"
+        data-slot="kpi-card-footer"
+        class="mt-auto flex min-w-0 flex-wrap items-center justify-between gap-2"
+      >
+        <slot name="footer">
+          <div
+            v-if="hasTrend"
+            data-slot="kpi-card-trend"
+            :aria-label="trendAccessibleLabel || undefined"
+            :class="trendClass"
+          >
+            <component
+              :is="trendIcon"
+              class="size-3.5 shrink-0"
+              aria-hidden="true"
+            />
+            <span v-if="hasTrendValue">{{ formattedTrendValue }}</span>
+            <span v-if="props.trendLabel" class="text-current/75">{{ props.trendLabel }}</span>
+          </div>
+          <p
+            v-if="props.summary"
+            data-slot="kpi-card-summary"
+            class="min-w-0 truncate text-xs text-muted-foreground"
+          >
+            {{ props.summary }}
+          </p>
+        </slot>
+      </div>
+    </template>
+  </article>
+</template>

package/src/components/ui/kpi-card/index.ts

@@ -0,0 +1,9 @@
+export { default as KpiCard } from "./KpiCard.vue"
+export type {
+  KpiCardProps,
+  KpiCardSize,
+  KpiCardTone,
+  KpiCardTrend,
+  KpiCardValue,
+  KpiCardValueFormatter,
+} from "./KpiCard.vue"