create-nala 3.0.0

package/template/src/components/ui/chart/BarChart.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { VisXYContainer, VisGroupedBar, VisStackedBar, VisAxis, VisTooltip } from '@unovis/vue'
+import { GroupedBar, StackedBar } from '@unovis/ts'
+
+interface Props {
+  data: Record<string, any>[]
+  index: string
+  categories: string[]
+  type?: 'grouped' | 'stacked'
+  colors?: string[]
+  showGridLine?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  roundedCorners?: number
+  yFormatter?: (tick: number) => string
+  xFormatter?: (tick: number, i?: number) => string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'grouped',
+  colors: () => ['var(--primary)', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
+  showGridLine: false,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: false,
+  roundedCorners: 4,
+})
+
+const x = (_: any, i: number) => i
+const y = props.categories.map((c) => (d: any) => d[c])
+
+function getColor(_: any, i: number): string {
+  return props.colors[i % props.colors.length]
+}
+
+const defaultYFormatter = (tick: number) => {
+  if (tick >= 1_000_000) return `${(tick / 1_000_000).toFixed(1)}M`
+  if (tick >= 1_000) return `${(tick / 1_000).toFixed(0)}k`
+  return `${tick}`
+}
+
+const defaultXFormatter = (i: number) => {
+  const d = props.data[i]
+  return d ? String(d[props.index]) : ''
+}
+
+const tooltipTemplate = (d: Record<string, any>) => {
+  if (!d) return ''
+  const title = d[props.index] ?? ''
+  const rows = props.categories
+    .map((cat, idx) => {
+      const val = d[cat]
+      const color = props.colors[idx % props.colors.length]
+      const formattedVal = typeof val === 'number' ? val.toLocaleString() : val
+      return `
+        <div class="flex items-center justify-between gap-4 text-xs py-0.5">
+          <span class="flex items-center gap-1.5 text-muted-foreground capitalize">
+            <span class="h-2 w-2 rounded-full" style="background-color: ${color}"></span>
+            ${cat}
+          </span>
+          <span class="font-mono font-bold text-foreground">${formattedVal}</span>
+        </div>
+      `
+    })
+    .join('')
+
+  return `
+    <div class="rounded-lg border border-border bg-popover/95 backdrop-blur-md px-3 py-2 text-xs shadow-md">
+      <div class="font-bold text-foreground mb-1.5 pb-1 border-b border-border/40">${title}</div>
+      <div class="space-y-0.5">${rows}</div>
+    </div>
+  `
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col">
+    <!-- Optional Legend -->
+    <div v-if="showLegend" class="flex flex-wrap items-center gap-4 mb-3 text-xs">
+      <div
+        v-for="(cat, idx) in categories"
+        :key="cat"
+        class="flex items-center gap-1.5 text-muted-foreground font-medium capitalize"
+      >
+        <span class="h-2.5 w-2.5 rounded-full" :style="{ backgroundColor: colors[idx % colors.length] }" />
+        <span>{{ cat }}</span>
+      </div>
+    </div>
+
+    <!-- Chart Container -->
+    <div class="flex-1 w-full min-h-45 relative">
+      <VisXYContainer :data="data" class="w-full h-full">
+        <VisGroupedBar
+          v-if="type === 'grouped'"
+          :x="x"
+          :y="y"
+          :color="getColor"
+          :roundedCorners="roundedCorners"
+        />
+        <VisStackedBar
+          v-else
+          :x="x"
+          :y="y"
+          :color="getColor"
+          :roundedCorners="roundedCorners"
+        />
+
+        <VisAxis
+          v-if="showXAxis"
+          type="x"
+          :tickFormat="xFormatter || defaultXFormatter"
+          :numTicks="data.length"
+          :gridLine="false"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+        <VisAxis
+          v-if="showYAxis"
+          type="y"
+          :tickFormat="yFormatter || defaultYFormatter"
+          :numTicks="4"
+          :gridLine="showGridLine"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+
+        <VisTooltip
+          v-if="showTooltip"
+          :attributes="{ 'data-unovis-tooltip': '' }"
+          :triggers="{
+            [type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar]: tooltipTemplate,
+          }"
+        />
+      </VisXYContainer>
+    </div>
+  </div>
+</template>

package/template/src/components/ui/chart/DonutChart.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { VisSingleContainer, VisDonut, VisTooltip } from '@unovis/vue'
+import { Donut } from '@unovis/ts'
+
+interface Props {
+  data: Record<string, any>[]
+  category: string
+  index: string
+  colors?: string[]
+  valueFormatter?: (val: number) => string
+  showTooltip?: boolean
+  showLegend?: boolean
+  arcWidth?: number
+  padAngle?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  colors: () => ['var(--primary)', '#3b82f6', '#8b5cf6', '#f59e0b', '#10b981'],
+  valueFormatter: (val: number) => val.toLocaleString(),
+  showTooltip: true,
+  showLegend: false,
+  arcWidth: 28,
+  padAngle: 0.02,
+})
+
+const value = (d: any) => d[props.category]
+
+function getColor(_: any, i: number): string {
+  return props.colors[i % props.colors.length]
+}
+
+const tooltipTemplate = (d: Record<string, any>) => {
+  if (!d) return ''
+  const name = d[props.index]
+  const val = props.valueFormatter(d[props.category])
+  return `
+    <div class="rounded-lg border border-border bg-popover/95 backdrop-blur-md px-3 py-1.5 text-xs shadow-md">
+      <span class="font-medium text-muted-foreground">${name}:</span>
+      <span class="font-mono font-bold text-foreground ml-1.5">${val}</span>
+    </div>
+  `
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col items-center justify-center">
+    <div class="w-full h-full min-h-40 relative flex items-center justify-center">
+      <VisSingleContainer :data="data" class="w-full h-full">
+        <VisDonut
+          :value="value"
+          :color="getColor"
+          :arcWidth="arcWidth"
+          :padAngle="padAngle"
+        />
+        <VisTooltip
+          v-if="showTooltip"
+          :attributes="{ 'data-unovis-tooltip': '' }"
+          :triggers="{ [Donut.selectors.segment]: tooltipTemplate }"
+        />
+      </VisSingleContainer>
+    </div>
+
+    <!-- Optional Legend -->
+    <div v-if="showLegend" class="flex flex-wrap items-center justify-center gap-3 mt-3 text-xs">
+      <div
+        v-for="(item, idx) in data"
+        :key="item[index]"
+        class="flex items-center gap-1.5 text-muted-foreground font-medium"
+      >
+        <span class="h-2 w-2 rounded-full" :style="{ backgroundColor: colors[idx % colors.length] }" />
+        <span>{{ item[index] }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/template/src/components/ui/chart/LineChart.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VisXYContainer, VisLine, VisAxis, VisTooltip, VisCrosshair } from '@unovis/vue'
+import { CurveType } from '@unovis/ts'
+
+interface Props {
+  data: Record<string, any>[]
+  index: string
+  categories: string[]
+  colors?: string[]
+  curveType?: CurveType
+  showGridLine?: boolean
+  showXAxis?: boolean
+  showYAxis?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  yFormatter?: (tick: number) => string
+  xFormatter?: (tick: number, i?: number) => string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  colors: () => ['var(--primary)', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'],
+  curveType: CurveType.MonotoneX,
+  showGridLine: false,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: false,
+})
+
+const x = (_: any, i: number) => i
+
+function getColor(i: number): string {
+  return props.colors[i % props.colors.length]
+}
+
+const defaultYFormatter = (tick: number) => {
+  if (tick >= 1_000_000) return `${(tick / 1_000_000).toFixed(1)}M`
+  if (tick >= 1_000) return `${(tick / 1_000).toFixed(0)}k`
+  return `${tick}`
+}
+
+const defaultXFormatter = (i: number) => {
+  const d = props.data[i]
+  return d ? String(d[props.index]) : ''
+}
+
+const tooltipTemplate = computed(() => {
+  return (d: Record<string, any>) => {
+    if (!d) return ''
+    const title = d[props.index] ?? ''
+    const rows = props.categories
+      .map((cat, idx) => {
+        const val = d[cat]
+        const color = getColor(idx)
+        const formattedVal = typeof val === 'number' ? val.toLocaleString() : val
+        return `
+          <div class="flex items-center justify-between gap-4 text-xs py-0.5">
+            <span class="flex items-center gap-1.5 text-muted-foreground capitalize">
+              <span class="h-2 w-2 rounded-full shrink-0" style="background-color: ${color}"></span>
+              ${cat}
+            </span>
+            <span class="font-mono font-bold text-foreground">${formattedVal}</span>
+          </div>
+        `
+      })
+      .join('')
+
+    return `
+      <div class="rounded-lg border border-border bg-popover/95 backdrop-blur-md px-3 py-2 text-xs shadow-md min-w-36">
+        <div class="font-bold text-foreground mb-1.5 pb-1 border-b border-border/40">${title}</div>
+        <div class="space-y-0.5">${rows}</div>
+      </div>
+    `
+  }
+})
+</script>
+
+<template>
+  <div class="w-full h-full flex flex-col">
+    <!-- Optional Legend -->
+    <div v-if="showLegend" class="flex flex-wrap items-center gap-4 mb-3 text-xs">
+      <div
+        v-for="(cat, idx) in categories"
+        :key="cat"
+        class="flex items-center gap-1.5 text-muted-foreground font-medium capitalize"
+      >
+        <span class="h-2.5 w-2.5 rounded-full" :style="{ backgroundColor: getColor(idx) }" />
+        <span>{{ cat }}</span>
+      </div>
+    </div>
+
+    <!-- Chart Container -->
+    <div class="flex-1 w-full min-h-45 relative">
+      <VisXYContainer :data="data" class="w-full h-full">
+        <template v-for="(category, idx) in categories" :key="category">
+          <VisLine
+            :x="x"
+            :y="(d: any) => d[category]"
+            :color="getColor(idx)"
+            :lineWidth="2.5"
+            :curveType="curveType"
+          />
+        </template>
+
+        <VisAxis
+          v-if="showXAxis"
+          type="x"
+          :tickFormat="xFormatter || defaultXFormatter"
+          :numTicks="data.length"
+          :gridLine="false"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+        <VisAxis
+          v-if="showYAxis"
+          type="y"
+          :tickFormat="yFormatter || defaultYFormatter"
+          :numTicks="4"
+          :gridLine="showGridLine"
+          :domainLine="false"
+          :tickLine="false"
+          tickTextColor="var(--muted-foreground)"
+        />
+
+        <VisTooltip v-if="showTooltip" :attributes="{ 'data-unovis-tooltip': '' }" />
+        <VisCrosshair v-if="showTooltip" :template="tooltipTemplate" />
+      </VisXYContainer>
+    </div>
+  </div>
+</template>

package/template/src/components/ui/chart/index.ts

@@ -0,0 +1,4 @@
+export { default as AreaChart } from './AreaChart.vue'
+export { default as LineChart } from './LineChart.vue'
+export { default as BarChart } from './BarChart.vue'
+export { default as DonutChart } from './DonutChart.vue'

package/template/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { CheckboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { computed } from "vue"
+import { Check } from "@lucide/vue"
+import { reactiveOmit } from "@vueuse/core"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+interface Props extends /* @vue-ignore */ CheckboxRootProps {
+  class?: HTMLAttributes["class"]
+  checked?: boolean | 'indeterminate'
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: boolean | 'indeterminate'): void
+  (e: 'update:checked', value: boolean | 'indeterminate'): void
+}>()
+
+const delegatedProps = reactiveOmit(props, "class", "checked", "modelValue")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const internalValue = computed({
+  get: () => {
+    if (props.checked !== undefined) {
+      return props.checked
+    }
+    return props.modelValue
+  },
+  set: (val) => {
+    emits('update:modelValue', val as boolean | 'indeterminate')
+    emits('update:checked', val as boolean | 'indeterminate')
+  },
+})
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    v-model="internalValue"
+    :class="
+      cn('peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-md border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+         props.class)"
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+    >
+      <slot v-bind="slotProps">
+        <Check class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/template/src/components/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue"

package/template/src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui"
+import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-bind="forwarded" data-slot="collapsible">
+    <slot />
+  </CollapsibleRoot>
+</template>

package/template/src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { CollapsibleContent } from "reka-ui"
+
+const props = defineProps<CollapsibleContentProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    data-slot="collapsible-content"
+    :class="cn('overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down', props.class)"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

package/template/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from "reka-ui"
+import { CollapsibleTrigger } from "reka-ui"
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props" data-slot="collapsible-trigger">
+    <slot />
+  </CollapsibleTrigger>
+</template>

package/template/src/components/ui/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue"
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
+export { default as CollapsibleContent } from "./CollapsibleContent.vue"

package/template/src/components/ui/command/Command.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxRoot, useFilter, useForwardPropsEmits } from "reka-ui"
+import { reactive, ref, watch } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandContext } from "."
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  modelValue: "",
+  highlightOnHover: true,
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: "base" })
+const filterState = reactive({
+  search: "",
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>

package/template/src/components/ui/command/CommandDialog.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { useForwardPropsEmits } from "reka-ui"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import Command from "./Command.vue"
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: "Command Palette",
+  description: "Search for a command to run...",
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-slot="slotProps" v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

package/template/src/components/ui/command/CommandEmpty.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { computed } from "vue"
+import { cn } from "@/lib/utils"
+import { useCommand } from "."
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/template/src/components/ui/command/CommandGroup.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui"
+import { computed, onMounted, onUnmounted } from "vue"
+import { cn } from "@/lib/utils"
+import { provideCommandGroupContext, useCommand } from "."
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes["class"]
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>