una-nuxt-module 2.1.26 → 2.1.28

package/.nuxt/templates/carousel/CarouselItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import { cn } from '~/src/runtime/lib/utils'
+import { useCarousel } from "./useCarousel"
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/.nuxt/templates/carousel/CarouselNext.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '~/src/runtime/components/ui/button'
+import { ArrowRight } from "lucide-vue-next"
+import { cn } from '~/src/runtime/lib/utils'
+import { Button } from '~/src/runtime/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>

package/.nuxt/templates/carousel/CarouselPrevious.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from "./interface"
+import type { ButtonVariants } from '~/src/runtime/components/ui/button'
+import { ArrowLeft } from "lucide-vue-next"
+import { cn } from '~/src/runtime/lib/utils'
+import { Button } from '~/src/runtime/components/ui/button'
+import { useCarousel } from "./useCarousel"
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+}
+& WithClassAsProps>(), {
+  variant: "outline",
+  size: "icon",
+})
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>

package/.nuxt/templates/carousel/index.ts

@@ -0,0 +1,10 @@
+export { default as Carousel } from "./Carousel.vue"
+export { default as CarouselContent } from "./CarouselContent.vue"
+export { default as CarouselItem } from "./CarouselItem.vue"
+export { default as CarouselNext } from "./CarouselNext.vue"
+export { default as CarouselPrevious } from "./CarouselPrevious.vue"
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from "./interface"
+
+export { useCarousel } from "./useCarousel"

package/.nuxt/templates/carousel/interface.ts

@@ -0,0 +1,26 @@
+import type useEmblaCarousel from "embla-carousel-vue"
+import type {
+  EmblaCarouselVueType,
+} from "embla-carousel-vue"
+import type { HTMLAttributes, UnwrapRef } from "vue"
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+}
+
+export interface CarouselEmits {
+  (e: "init-api", payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes["class"]
+}

package/.nuxt/templates/carousel/useCarousel.ts

@@ -0,0 +1,56 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from "./interface"
+import { createInjectionState } from "@vueuse/core"
+import emblaCarouselVue from "embla-carousel-vue"
+import { onMounted, ref } from "vue"
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on("init", onSelect)
+      emblaApi.value?.on("reInit", onSelect)
+      emblaApi.value?.on("select", onSelect)
+
+      emits("init-api", emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error("useCarousel must be used within a <Carousel />")
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }

package/.nuxt/templates/chart/ChartCrosshair.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts"
+import type { Component } from "vue"
+import { omit } from "@unovis/ts"
+import { VisCrosshair, VisTooltip } from "@unovis/vue"
+import { createApp } from "vue"
+import { ChartTooltip } from "."
+
+const props = withDefaults(defineProps<{
+  colors: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    const componentDiv = document.createElement("div")
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find(i => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? "transparent"
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>

package/.nuxt/templates/chart/ChartLegend.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts"
+import { BulletLegend } from "@unovis/ts"
+import { VisBulletLegend } from "@unovis/vue"
+import { nextTick, onMounted, ref } from "vue"
+import { buttonVariants } from '~/src/runtime/components/ui/button'
+
+const props = withDefaults(defineProps<{ items?: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  "legendItemClick": [d: BulletLegendItemInterface, i: number]
+  "update:items": [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+function keepStyling() {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: "ghost", size: "sm" }).split(" ")
+
+    elements?.forEach(el => el.classList.add(...classes, "!inline-flex", "!mr-2"))
+  })
+}
+
+onMounted(() => {
+  keepStyling()
+})
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits("legendItemClick", d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some(i => i.inactive)
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits("update:items", props.items.map(item => ({ ...item, inactive: false })))
+  }
+  else {
+    // apply selection, set other item as inactive
+    emits("update:items", props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+  }
+  keepStyling()
+}
+</script>
+
+<template>
+  <div
+    ref="elRef" class="w-max" :style="{
+      '--vis-legend-bullet-size': '16px',
+    }"
+  >
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>

package/.nuxt/templates/chart/ChartSingleTooltip.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from "@unovis/ts"
+import type { Component } from "vue"
+import { omit } from "@unovis/ts"
+import { VisTooltip } from "@unovis/vue"
+import { createApp } from "vue"
+import { ChartTooltip } from "."
+
+const props = defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>()
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  const valueFormatter = props.valueFormatter ?? ((tick: number) => `${tick}`)
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d)
+    }
+    else {
+      const componentDiv = document.createElement("div")
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items?.find(i => i.name === key)
+        return { ...legendReference, value: valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+
+  else {
+    const data = d.data
+
+    if (wm.has(data)) {
+      return wm.get(data)
+    }
+    else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [{ name: data.name, value: valueFormatter(data[props.index]), color: style.fill }]
+      const componentDiv = document.createElement("div")
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20" :vertical-shift="20" :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>

package/.nuxt/templates/chart/ChartTooltip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '~/src/runtime/components/ui/card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="p-3 border-b">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="p-3 min-w-[180px] flex flex-col gap-1">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="w-2.5 h-2.5 mr-2">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="font-semibold ml-4">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>

package/.nuxt/templates/chart/index.ts

@@ -0,0 +1,18 @@
+export { default as ChartCrosshair } from "./ChartCrosshair.vue"
+export { default as ChartLegend } from "./ChartLegend.vue"
+export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue"
+export { default as ChartTooltip } from "./ChartTooltip.vue"
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
+
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
+  return [
+    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+  ]
+}
+
+export * from "./interface"

package/.nuxt/templates/chart/interface.ts

@@ -0,0 +1,64 @@
+import type { Spacing } from "@unovis/ts"
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and tooltip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}

package/.nuxt/templates/chart-area/AreaChart.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from "@unovis/ts"
+import type { Component } from "vue"
+import type { BaseChartProps } from "."
+import { Area, Axis, CurveType, Line } from "@unovis/ts"
+
+import { VisArea, VisAxis, VisLine, VisXYContainer } from "@unovis/vue"
+import { useMounted } from "@vueuse/core"
+import { useId } from "reka-ui"
+import { computed, ref } from "vue"
+import { cn } from '~/src/runtime/lib/utils'
+import { ChartCrosshair, ChartLegend, defaultColors } from '~/src/runtime/components/ui/chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+  /**
+   * Controls the visibility of gradient.
+   * @default true
+   */
+  showGradient?: boolean
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+  showGradient: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const chartRef = useId()
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits("legendItemClick", d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+            <template v-if="showGradient">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#${chartRef}-color-${i})`,
+            },
+          }"
+          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--vis-text-color))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>