@iqual/nuxt-icms 1.4.10 → 1.5.0

package/components/ui/calendar/CalendarPrevButton.vue

@@ -1,34 +0,0 @@
-<script lang="ts" setup>
-import type { CalendarPrevProps } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { cn } from '@/lib/utils'
-import { ChevronLeft } from 'lucide-vue-next'
-import { CalendarPrev, useForwardProps } from 'radix-vue'
-import { computed } from 'vue'
-
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarPrev
-    :class="cn(
-      buttonVariants({ variant: 'outline' }),
-      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <ChevronLeft class="h-4 w-4" />
-    </slot>
-  </CalendarPrev>
-</template>

package/components/ui/calendar/index.ts

@@ -1,12 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as CalendarCell } from './CalendarCell.vue'
-export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
-export { default as CalendarGrid } from './CalendarGrid.vue'
-export { default as CalendarGridBody } from './CalendarGridBody.vue'
-export { default as CalendarGridHead } from './CalendarGridHead.vue'
-export { default as CalendarGridRow } from './CalendarGridRow.vue'
-export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
-export { default as CalendarHeader } from './CalendarHeader.vue'
-export { default as CalendarHeading } from './CalendarHeading.vue'
-export { default as CalendarNextButton } from './CalendarNextButton.vue'
-export { default as CalendarPrevButton } from './CalendarPrevButton.vue'

package/components/ui/card/Card.vue

@@ -1,21 +0,0 @@
-<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(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardContent.vue

@@ -1,14 +0,0 @@
-<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('p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>

package/components/ui/card/CardDescription.vue

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

package/components/ui/card/CardFooter.vue

@@ -1,14 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-<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

@@ -1,6 +0,0 @@
-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,52 +0,0 @@
-<script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { useProvideCarousel } from './useCarousel'
-
-const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
-  orientation: 'horizontal',
-})
-
-const emits = defineEmits<CarouselEmits>()
-
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
-
-defineExpose({
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
-
-  if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
-  }
-
-  if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
-  }
-}
-</script>
-
-<template>
-  <div
-    :class="cn('relative', props.class)"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    @keydown="onKeyDown"
-  >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
-  </div>
-</template>

package/components/ui/carousel/CarouselContent.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { useCarousel } from './useCarousel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<WithClassAsProps>()
-
-const { carouselRef, orientation } = useCarousel()
-</script>
-
-<template>
-  <div ref="carouselRef" class="overflow-hidden">
-    <div
-      :class="
-        cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/components/ui/carousel/CarouselItem.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
-</script>
-
-<template>
-  <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,
-    )"
-  >
-    <slot />
-  </div>
-</template>

package/components/ui/carousel/CarouselNext.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { Button } from '@iqual/nuxt-icms/components/ui/button'
-import { cn } from '@/lib/utils'
-import { ArrowRight } from 'lucide-vue-next'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollNext, scrollNext } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollNext"
-    :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"
-  >
-    <slot>
-      <ArrowRight class="h-4 w-4 text-current" />
-      <span class="sr-only">Next Slide</span>
-    </slot>
-  </Button>
-</template>

package/components/ui/carousel/CarouselPrevious.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { Button } from '@iqual/nuxt-icms/components/ui/button'
-import { cn } from '@/lib/utils'
-import { ArrowLeft } from 'lucide-vue-next'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <Button
-    :disabled="!canScrollPrev"
-    :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"
-  >
-    <slot>
-      <ArrowLeft class="h-4 w-4 text-current" />
-      <span class="sr-only">Previous Slide</span>
-    </slot>
-  </Button>
-</template>

package/components/ui/carousel/index.ts

@@ -1,10 +0,0 @@
-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/components/ui/carousel/interface.ts

@@ -1,26 +0,0 @@
-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/components/ui/carousel/useCarousel.ts

@@ -1,56 +0,0 @@
-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/components/ui/chart/ChartCrosshair.vue

@@ -1,45 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-<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

@@ -1,64 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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'