[WIP] - KPI

documentation/src/App.vue

@@ -77,6 +77,9 @@ const routes = router.getRoutes().filter((route) => route.children.length > 0)
                             <Badge v-if="route.meta.alpha" variant="destructive" type="outline" size="xs">
                               Alpha
                             </Badge>
+                            <Badge v-if="route.meta.new" type="outline" size="xs">
+                              New
+                            </Badge>
                           </RouterLink>
                         </SidebarMenuButton>
                       </SidebarMenuSubItem>

documentation/src/router/index.ts

@@ -19,6 +19,7 @@ import {
   DropdownMenu,
   Empty,
   Inputs,
+  Kpi,
   Pagination,
   Popover,
   Select,
@@ -203,6 +204,16 @@ const routes = [
           label: 'Collection of Shadcn Components'
         },
       },
+      {
+        path: '/components/kpi',
+        name: 'Kpi',
+        component: Kpi,
+        meta: {
+          layout: ComponentLayout,
+          contributor: 'lumuix',
+          new: true,
+        },
+      },
       {
         path: '/components/pagination',
         name: 'Pagination',

documentation/src/views/code/KpiCode.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { User } from 'lucide-vue-next'
+import {
+  Kpi, KpiContent, KpiTitle, KpiCount, KpiIcon
+} from '@sethsharp/lumuix'
+</script>
+
+<template>
+  <div class="grid grid-cols-4">
+    <Kpi>
+      <KpiIcon>
+        <User />
+      </KpiIcon>
+
+      <KpiContent>
+        <KpiTitle>
+          Users
+        </KpiTitle>
+        <KpiCount>
+          1,090
+        </KpiCount>
+      </KpiContent>
+    </Kpi>
+
+    <Kpi variant="destructive">
+      <KpiIcon>
+        <User />
+      </KpiIcon>
+
+      <KpiContent>
+        <KpiTitle>
+          Profit
+        </KpiTitle>
+        <KpiCount>
+          $69,420
+        </KpiCount>
+      </KpiContent>
+    </Kpi>
+
+    <Kpi variant="warning">
+      <KpiIcon>
+        <User />
+      </KpiIcon>
+
+      <KpiContent>
+        <KpiTitle>
+          Users
+        </KpiTitle>
+        <KpiCount>
+          +/-20
+        </KpiCount>
+      </KpiContent>
+    </Kpi>
+
+    <Kpi variant="success">
+      <KpiIcon>
+        <User />
+      </KpiIcon>
+
+      <KpiContent>
+        <KpiTitle>
+          Attention
+        </KpiTitle>
+        <KpiCount>
+          100%
+        </KpiCount>
+      </KpiContent>
+    </Kpi>
+  </div>
+</template>
+

documentation/src/views/components/Kpi.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import sourceCode from '../code/KpiCode.vue?raw'
+import KpiCode from '../code/KpiCode.vue'
+import RenderPreviewCode from '../../components/RenderPreviewCode.vue'
+</script>
+
+<template>
+  <RenderPreviewCode :source-code="sourceCode">
+    <KpiCode />
+  </RenderPreviewCode>
+</template>

documentation/src/views/index.ts

@@ -16,6 +16,7 @@ export { default as Draggable } from './components/Draggable.vue'
 export { default as DropdownMenu } from './components/DropdownMenu.vue'
 export { default as Empty } from './components/Empty.vue'
 export { default as Inputs } from './components/Inputs.vue'
+export { default as Kpi } from './components/Kpi.vue'
 export { default as Pagination } from './components/Pagination.vue'
 export { default as Popover } from './components/Popover.vue'
 export { default as Lumuix } from './components/Lumuix.vue'

ui/src/components/kpi/Kpi.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type KpiVariants } from '.'
+
+const props = withDefaults(defineProps<{
+  variant?: KpiVariants['variant']
+}>(), {
+  variant: 'primary'
+})
+
+provideKpiContext(props.variant)
+</script>
+
+<script lang="ts">
+import { createContext } from '@/lib/createContext'
+
+export const [injectKpiContext, provideKpiContext]
+  = createContext('KpiRoot')
+</script>
+
+<template>
+  <div class="rounded-lg p-4 bg-card border border-card-border flex gap-4 items-center">
+    <slot />
+  </div>
+</template>

ui/src/components/kpi/KpiContent.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <slot />
+  </div>
+</template>

ui/src/components/kpi/KpiCount.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <span class="text-sub-text">
+    <slot />
+  </span>
+</template>

ui/src/components/kpi/KpiIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { kpiVariants } from '.'
+import { type KpiVariants } from '.'
+import { cn } from '@/lib/utils'
+import { injectKpiContext } from './Kpi.vue'
+
+const variant = <KpiVariants['variant']>injectKpiContext()
+</script>
+
+<template>
+  <div :class="cn(kpiVariants({ variant }))">
+    <slot />
+  </div>
+</template>

ui/src/components/kpi/KpiTitle.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h3 class="text-heading text-xl">
+    <slot />
+  </h3>
+</template>

ui/src/components/kpi/index.ts

@@ -0,0 +1,26 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Kpi } from './Kpi.vue'
+export { default as KpiContent } from './KpiContent.vue'
+export { default as KpiCount } from './KpiCount.vue'
+export { default as KpiIcon } from './KpiIcon.vue'
+export { default as KpiTitle } from './KpiTitle.vue'
+
+export const kpiVariants = cva(
+  'p-4 rounded-md flex-shrink-0 flex justify-center items-center',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary/10 text-primary shadow-sm hover:bg-primary/80',
+        destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/70',
+        warning: 'bg-warning/10 text-warning hover:bg-warning/70',
+        success: 'bg-green-500/10 text-green-500 hover:bg-green-500/70',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+    },
+  },
+)
+
+export type KpiVariants = VariantProps<typeof kpiVariants>

ui/src/index.ts

@@ -16,6 +16,7 @@ export * from '@/components/dropdown-menu'
 export * from '@/components/empty'
 export * from '@/components/form'
 export * from '@/components/inputs'
+export * from '@/components/kpi'
 export * from '@/components/chart'
 export * from '@/components/pagination'
 export * from '@/components/popover'