@iqual/nuxt-icms 1.0.14 → 1.2.1

package/components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

package/components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

package/components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

package/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

package/components/ui/carousel/Carousel.vue

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import type {
-  CarouselEmits,
-  CarouselProps,
-  WithClassAsProps,
-} from './interface'
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
 import { useProvideCarousel } from './useCarousel'
 
@@ -13,15 +9,7 @@ const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
 
 const emits = defineEmits<CarouselEmits>()
 
-const {
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-} = useProvideCarousel(props, emits)
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
 
 defineExpose({
   canScrollNext,
@@ -59,14 +47,6 @@ function onKeyDown(event: KeyboardEvent) {
     tabindex="0"
     @keydown="onKeyDown"
   >
-    <slot
-      :can-scroll-next
-      :can-scroll-prev
-      :carousel-api
-      :carousel-ref
-      :orientation
-      :scroll-next
-      :scroll-prev
-    />
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
   </div>
 </template>

package/components/ui/carousel/CarouselContent.vue

@@ -20,8 +20,7 @@ const { carouselRef, orientation } = useCarousel()
           'flex',
           orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
           props.class,
-        )
-      "
+        )"
       v-bind="$attrs"
     >
       <slot />

package/components/ui/carousel/CarouselItem.vue

@@ -12,13 +12,11 @@ const { orientation } = useCarousel()
   <div
     role="group"
     aria-roledescription="slide"
-    :class="
-      cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        props.class,
-      )
-    "
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
   >
     <slot />
   </div>

package/components/ui/carousel/CarouselNext.vue

@@ -13,15 +13,13 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
 <template>
   <Button
     :disabled="!canScrollNext"
-    :class="
-      cn(
-        'absolute h-8 w-8 touch-manipulation rounded-full p-0',
-        orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        props.class,
-      )
-    "
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
     variant="outline"
     @click="scrollNext"
   >

package/components/ui/carousel/CarouselPrevious.vue

@@ -13,15 +13,13 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
 <template>
   <Button
     :disabled="!canScrollPrev"
-    :class="
-      cn(
-        'absolute h-8 w-8 touch-manipulation rounded-full p-0',
-        orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        props.class,
-      )
-    "
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
     variant="outline"
     @click="scrollPrev"
   >

package/components/ui/carousel/index.ts

@@ -3,6 +3,8 @@ 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 type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from './interface'
 
 export { useCarousel } from './useCarousel'

package/components/ui/carousel/interface.ts

@@ -1,5 +1,7 @@
 import type useEmblaCarousel from 'embla-carousel-vue'
-import type { EmblaCarouselVueType } from 'embla-carousel-vue'
+import type {
+  EmblaCarouselVueType,
+} from 'embla-carousel-vue'
 import type { HTMLAttributes, UnwrapRef } from 'vue'
 
 type CarouselApi = EmblaCarouselVueType[1]

package/components/ui/carousel/useCarousel.ts

@@ -1,21 +1,18 @@
-import type {
-  UnwrapRefCarouselApi as CarouselApi,
-  CarouselEmits,
-  CarouselProps,
-} from './interface'
+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,
-    )
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins)
 
     function scrollPrev() {
       emblaApi.value?.scrollPrev()
@@ -33,7 +30,8 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
     }
 
     onMounted(() => {
-      if (!emblaApi.value) return
+      if (!emblaApi.value)
+        return
 
       emblaApi.value?.on('init', onSelect)
       emblaApi.value?.on('reInit', onSelect)
@@ -42,15 +40,7 @@ const [useProvideCarousel, useInjectCarousel] = createInjectionState(
       emits('init-api', emblaApi.value)
     })
 
-    return {
-      carouselRef: emblaNode,
-      carouselApi: emblaApi,
-      canScrollPrev,
-      canScrollNext,
-      scrollPrev,
-      scrollNext,
-      orientation,
-    }
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
   },
 )
 

package/components/ui/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/components/ui/chart/ChartLegend.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { BulletLegend } from '@unovis/ts'
+import { VisBulletLegend } from '@unovis/vue'
+import { nextTick, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
+  'update:items': [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
+
+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 }))
+  }
+}
+</script>
+
+<template>
+  <div ref="elRef" class="w-max">
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>

package/components/ui/chart/ChartSingleTooltip.vue

@@ -0,0 +1,64 @@
+<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 = withDefaults(defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>(), {
+  valueFormatter: (tick: number) => `${tick}`,
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  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: props.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: props.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/components/ui/chart/ChartTooltip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/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/components/ui/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/components/ui/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 toolip.
+   */
+  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
+}