@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/ui/v-calendar/Calendar.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts">
+import type { Calendar } from 'v-calendar'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { DatePicker } from 'v-calendar'
+import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
+import { isVCalendarSlot } from '.'
+
+/* Extracted from v-calendar */
+type DatePickerModel = DatePickerDate | DatePickerRangeObject
+type DateSource = Date | string | number
+type DatePickerDate = DateSource | Partial<SimpleDateParts> | null
+interface DatePickerRangeObject {
+  start: Exclude<DatePickerDate, null>
+  end: Exclude<DatePickerDate, null>
+}
+interface SimpleDateParts {
+  year: number
+  month: number
+  day: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps<{
+  modelValue?: string | number | Date | DatePickerModel
+  modelModifiers?: object
+  columns?: number
+  type?: 'single' | 'range'
+}>(), {
+  type: 'single',
+  columns: 1,
+})
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: typeof props.modelValue): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+})
+
+const datePicker = ref<InstanceType<typeof DatePicker>>()
+// @ts-expect-error in this current version of v-calendar has the calendaRef instance, which is required to handle arrow nav.
+const calendarRef = computed<InstanceType<typeof Calendar>>(() => datePicker.value.calendarRef)
+
+function handleNav(direction: 'prev' | 'next') {
+  if (!calendarRef.value)
+    return
+
+  if (direction === 'prev')
+    calendarRef.value.movePrev()
+  else calendarRef.value.moveNext()
+}
+
+onMounted(async () => {
+  await nextTick()
+  if (modelValue.value instanceof Date && calendarRef.value)
+    calendarRef.value.focusDate(modelValue.value)
+})
+
+const $slots = useSlots()
+const vCalendarSlots = computed(() => {
+  return Object.keys($slots)
+    .filter(name => isVCalendarSlot(name))
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = $slots[key]
+      return obj
+    }, {})
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('prev')"
+      >
+        <ChevronLeft class="w-4 h-4" />
+      </button>
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('next')"
+      >
+        <ChevronRight class="w-4 h-4" />
+      </button>
+    </div>
+
+    <DatePicker
+      ref="datePicker"
+      v-bind="$attrs"
+      v-model="modelValue"
+      :model-modifiers="modelModifiers"
+      class="calendar"
+      trim-weeks
+      :transition="'none'"
+      :columns="columns"
+    >
+      <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope" />
+      </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
+    </DatePicker>
+  </div>
+</template>
+
+<style lang="css">
+.calendar {
+  @apply p-3 text-center;
+}
+.calendar .vc-pane-layout {
+  @apply grid gap-4 max-sm:!grid-cols-1;
+}
+.calendar .vc-title {
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
+}
+.calendar .vc-pane-header-wrapper {
+  @apply hidden;
+}
+.calendar .vc-weeks {
+  @apply mt-4;
+}
+.calendar .vc-weekdays {
+  @apply justify-items-center;
+}
+.calendar .vc-weekday {
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
+}
+.calendar .vc-weeks {
+  @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
+}
+.calendar .vc-day:has(.vc-highlights) {
+  @apply first:rounded-l-md last:rounded-r-md;
+}
+.calendar .vc-day.is-today:not(:has(.vc-day-layer)) .vc-day-content {
+  @apply bg-secondary text-primary rounded-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-start) {
+  @apply rounded-l-md;
+}
+.calendar .vc-day:has(.vc-highlight-base-end) {
+  @apply rounded-r-md;
+}
+.calendar .vc-day:has(.vc-highlight-bg-outline):not(:has(.vc-highlight-base-start)):not(:has(.vc-highlight-base-end)) {
+  @apply rounded-md;
+}
+.calendar .vc-day-content  {
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9 font-normal aria-selected:opacity-100 select-none;
+}
+.calendar .vc-day-content:not(.vc-highlight-content-light) {
+  @apply rounded-md;
+}
+.calendar .is-not-in-month:not(:has(.vc-highlight-content-solid)):not(:has(.vc-highlight-content-light)):not(:has(.vc-highlight-content-outline)),
+.calendar .vc-disabled {
+  @apply text-muted-foreground opacity-50;
+}
+.calendar .vc-highlight-content-solid, .calendar .vc-highlight-content-outline {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+.calendar .vc-highlight-content-light {
+  @apply bg-accent text-accent-foreground;
+}
+.calendar .vc-pane-container.in-transition {
+  @apply overflow-hidden;
+}
+.calendar .vc-pane-container {
+  @apply w-full relative;
+}
+:root {
+	--vc-slide-translate: 22px;
+	--vc-slide-duration: 0.15s;
+	--vc-slide-timing: ease;
+}
+
+.calendar .vc-fade-enter-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-enter-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+	transition:
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	pointer-events: none;
+}
+
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+	position: absolute !important;
+	width: 100%;
+}
+
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.calendar .vc-slide-fade-leave-to {
+	opacity: 0;
+}
+
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-left,
+.calendar .vc-slide-fade-leave-to.direction-left {
+	-webkit-transform: translateX(var(--vc-slide-translate));
+	transform: translateX(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-right,
+.calendar .vc-slide-fade-leave-to.direction-right {
+	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
+	transform: translateX(calc(-1 * var(--vc-slide-translate)));
+}
+
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-top,
+.calendar .vc-slide-fade-leave-to.direction-top {
+	-webkit-transform: translateY(var(--vc-slide-translate));
+	transform: translateY(var(--vc-slide-translate));
+}
+
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-fade-enter-from.direction-bottom,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
+/**
+ * Timepicker styles
+ */
+.vc-time-picker {
+  @apply flex flex-col items-center p-2;
+}
+.vc-time-picker.vc-invalid {
+  @apply pointer-events-none opacity-50;
+}
+.vc-time-picker.vc-attached {
+  @apply border-t border-solid border-secondary mt-2;
+}
+.vc-time-picker > * + * {
+  @apply mt-1;
+}
+.vc-time-header {
+  @apply flex items-center text-sm font-semibold uppercase mt-1 px-1 leading-6;
+}
+.vc-time-select-group {
+  @apply inline-flex items-center px-1 rounded-md bg-primary-foreground border border-solid border-secondary;
+}
+.vc-time-select-group .vc-base-icon {
+  @apply mr-1 text-primary stroke-primary;
+}
+.vc-time-select-group select {
+  @apply bg-primary-foreground p-1 appearance-none outline-none text-center;
+}
+.vc-time-weekday {
+  @apply text-muted-foreground tracking-wide;
+}
+.vc-time-month {
+  @apply text-primary ml-2;
+}
+.vc-time-day {
+  @apply text-primary ml-1;
+}
+.vc-time-year {
+  @apply text-muted-foreground ml-2;
+}
+.vc-time-colon {
+  @apply mb-0.5;
+}
+.vc-time-decimal {
+  @apply ml-0.5;
+}
+</style>

package/components/ui/v-calendar/index.ts

@@ -0,0 +1,22 @@
+export { default as Calendar } from './Calendar.vue'
+import type { CalendarSlotName } from 'v-calendar/dist/types/src/components/Calendar/CalendarSlot.vue.d.ts'
+
+export function isVCalendarSlot(slotName: string): slotName is CalendarSlotName {
+  const validSlots: CalendarSlotName[] = [
+    'day-content',
+    'day-popover',
+    'dp-footer',
+    'footer',
+    'header-title-wrapper',
+    'header-title',
+    'header-prev-button',
+    'header-next-button',
+    'nav',
+    'nav-prev-button',
+    'nav-next-button',
+    'page',
+    'time-header',
+  ]
+
+  return validSlots.includes(slotName as CalendarSlotName)
+}

package/composables/useAccordionScroll.ts

@@ -1,4 +1,4 @@
-import { useNavigationOffset } from '@/composables/useNavigationOffset'
+import { useNavigationOffset } from './useNavigationOffset'
 
 export function useAccordionScroll(el: ComponentPublicInstance | undefined): { handleAccordionOpen: () => void } {
   if (!el) return { handleAccordionOpen: () => { } }

package/composables/useGlobalConfig.ts

@@ -0,0 +1,57 @@
+
+export async function useGlobalConfig() {
+  const initData = useInitData()
+
+  const companyLogo = computed(() => {
+    return initData.globalConfig.value.companyLogo
+  })
+
+  const companyLogoAlt = computed(() => {
+    return initData.globalConfig.value.companyLogoAlt
+  })
+
+  const companyName = computed(() => {
+    return initData.globalConfig.value.companyName
+  })
+
+  const companyDescription = computed(() => {
+    return initData.globalConfig.value.companyDescription
+  })
+
+  const address = computed(() => {
+    return initData.globalConfig.value.address
+  })
+
+  const phoneNumber = computed(() => {
+    return initData.globalConfig.value.phoneNumber
+  })
+
+  const emailAddress = computed(() => {
+    return initData.globalConfig.value.emailAddress
+  })
+
+  const contactButtons = computed(() => {
+    return initData.globalConfig.value.contactButtons
+  })
+
+  const metaLinks = computed(() => {
+    return initData.globalConfig.value.metaLinks
+  })
+
+  const socialMediaLinks = computed(() => {
+    return initData.globalConfig.value.socialMediaLinks
+  })
+
+  return {
+    companyLogo,
+    companyLogoAlt, 
+    companyName,
+    companyDescription,
+    address,
+    phoneNumber,
+    emailAddress,
+    contactButtons,
+    metaLinks,
+    socialMediaLinks,
+  }
+}

package/composables/useGraphqlCacheability.ts

@@ -0,0 +1,22 @@
+import type { GraphqlResponseTyped } from '#nuxt-graphql-middleware/response'
+import type { H3Event } from 'h3'
+
+export function useGraphqlCacheability(
+  event: H3Event,
+  response?: GraphqlResponseTyped,
+) {
+  if (import.meta.server) {
+    useCDNHeaders((cdn) => {
+      const cacheability = response?.extensions.cacheability
+      if (!cacheability?.isCacheable) {
+        cdn.private()
+        return
+      }
+
+      cdn
+        .public()
+        .setNumeric('maxAge', cacheability.maxAge)
+        .addTags(cacheability.tagsCdn)
+    }, event)
+  }
+}

package/composables/useImageSources.ts

@@ -0,0 +1,208 @@
+import type { ImageSizesVariant } from '@nuxt/image'
+import type { MediaImageFragment } from '#graphql-operations'
+
+interface ImageSource {
+  sizes?: string
+  srcset: string
+  media?: string
+}
+
+interface UseImageSourcesOptions {
+  media: Ref<MediaImageFragment> | MediaImageFragment
+  imageAspectRatios?: Ref<string | undefined> | string | undefined
+  imageSizes?: Ref<string | undefined> | string | undefined
+}
+
+// Local implementation of parseSizes from @nuxt/image
+function parseSizes(input: Record<string, string | number> | string): Record<string, string> {
+  const sizes: Record<string, string> = {}
+  if (typeof input === "string") {
+    for (const entry of input.split(/[\s,]+/).filter((e) => e)) {
+      const s = entry.split(":")
+      if (s.length !== 2) {
+        sizes["1px"] = s[0].trim()
+      } else {
+        sizes[s[0].trim()] = s[1].trim()
+      }
+    }
+  } else {
+    Object.assign(sizes, input)
+  }
+  return sizes
+}
+
+// Helper function, copied from NuxtImage.
+function getSizesVariant(key: string, size: string, hwRatio: number, img: any): ImageSizesVariant | undefined {
+  const screenMaxWidth = (img.options.screens && img.options.screens[key]) || Number.parseInt(key)
+  const isFluid = size.endsWith('vw')
+  if (!isFluid && /^\d+$/.test(size)) {
+    size = size + 'px'
+  }
+  if (!isFluid && !size.endsWith('px')) {
+    return undefined
+  }
+  let _cWidth = Number.parseInt(size)
+  if (!screenMaxWidth || !_cWidth) {
+    return undefined
+  }
+  if (isFluid) {
+    _cWidth = Math.round((_cWidth / 100) * screenMaxWidth)
+  }
+  const _cHeight = Math.round(_cWidth * hwRatio)
+  return {
+    size,
+    screenMaxWidth,
+    _cWidth,
+    _cHeight,
+  }
+}
+
+// Helper function, copied from NuxtImage.
+function finaliseSizeVariants(sizeVariants: any[]) {
+  sizeVariants.sort((v1, v2) => v1.screenMaxWidth - v2.screenMaxWidth)
+
+  // de-duplicate size variants (by key `media`)
+  let previousMedia = null
+  for (let i = sizeVariants.length - 1; i >= 0; i--) {
+    const sizeVariant = sizeVariants[i]
+    if (sizeVariant.media === previousMedia) {
+      sizeVariants.splice(i, 1)
+    }
+    previousMedia = sizeVariant.media
+  }
+
+  for (let i = 0; i < sizeVariants.length; i++) {
+    sizeVariants[i].media = sizeVariants[i + 1]?.media || ''
+  }
+}
+
+// Helper function, copied from NuxtImage.
+function finaliseSrcsetVariants(srcsetVariants: any[]) {
+  // sort by width
+  srcsetVariants.sort((v1, v2) => v1.width - v2.width)
+
+  // de-duplicate srcset variants (by key `width`)
+  let previousWidth = null
+  for (let i = srcsetVariants.length - 1; i >= 0; i--) {
+    const sizeVariant = srcsetVariants[i]
+    if (sizeVariant.width === previousWidth) {
+      srcsetVariants.splice(i, 1)
+    }
+    previousWidth = sizeVariant.width
+  }
+}
+
+export function useImageSources(options: UseImageSourcesOptions) {
+  const img = useImage()
+  const baseUrl = useRuntimeConfig().public.imageBaseUrl
+
+  // Convert props to refs if they aren't already
+  const mediaRef = toRef(options.media)
+  const imageAspectRatiosRef = toRef(options.imageAspectRatios)
+  const imageSizesRef = toRef(options.imageSizes)
+
+  const placeHolderImage = computed(() => {
+    const sourceImage = baseUrl + mediaRef.value?.sourceUrl?.path
+    if (!sourceImage || sourceImage === baseUrl) return ''
+    return img(sourceImage, { format: 'webp', width: 100, blur: 100 })
+  })
+
+  const imageSources = computed((): ImageSource[] => {
+    const sourceImage = baseUrl + mediaRef.value?.sourceUrl?.path
+    if (!sourceImage || sourceImage === baseUrl) return []
+
+    const sources: ImageSource[] = []
+    const imgSizes = imageSizesRef.value ?? Object.keys(img.options.screens).map(key => `${key}:100vw`).join(' ')
+
+    // No aspect ratios provided.
+    if (!imageAspectRatiosRef.value) {
+      const imageSize = img.getSizes(sourceImage, {
+        sizes: imgSizes,
+        modifiers: {
+          format: 'webp'
+        }
+      })
+      // Cast the ImageSizes result to our ImageSource interface
+      sources.push(imageSize as ImageSource)
+      return sources
+    }
+
+    // Aspect ratios provided.
+    const parsedAspectRatios = parseSizes(imageAspectRatiosRef.value)
+    const parsedImageSizes = parseSizes(imgSizes)
+    const densities = img.options.densities
+    const keys = Object.keys(parsedImageSizes)
+    const lastKey = keys[keys.length - 1]
+
+    for (const keyAspectRatios in parsedAspectRatios) {
+      const [l, h] = parsedAspectRatios[keyAspectRatios].split('/').map(Number)
+      const hwRatio = (l && h) ? h / l : 0
+      const sizeVariants = []
+      const srcsetVariants = []
+
+      let screenSizes = Object.keys(parsedImageSizes)
+      if (Object.keys(parsedImageSizes).includes(keyAspectRatios)) {
+        const minSizeIndex = Object.keys(parsedImageSizes).indexOf(keyAspectRatios)
+        screenSizes = Object.keys(parsedImageSizes).slice(minSizeIndex)
+      }
+
+      for (const index in screenSizes) {
+        const screenSize = screenSizes[index]
+
+        const variant = getSizesVariant(screenSize, String(parsedImageSizes[screenSize]), hwRatio, img)
+        if (variant === undefined) {
+          continue
+        }
+
+        // Add size variant with 'media'.
+        sizeVariants.push({
+          size: variant.size,
+          screenMaxWidth: variant.screenMaxWidth,
+          media: `(max-width: ${variant.screenMaxWidth}px)`,
+        })
+
+        // Add srcset variants and ignore densities (for current 'size' processed).
+        srcsetVariants.push({
+          width: variant._cWidth,
+          src: img(sourceImage, {
+            width: variant._cWidth ? variant._cWidth : undefined,
+            height: variant._cHeight ? variant._cHeight : undefined,
+            fit: 'cover',
+            format: 'webp'
+          }),
+        })
+
+        // Make sure to not create duplicate size variants for the same screen size.
+        if (keyAspectRatios != screenSize && Object.keys(parsedAspectRatios).includes(screenSize)) {
+          break
+        }
+      }
+
+      const media = sizeVariants.slice(-1)[0]?.media
+      finaliseSizeVariants(sizeVariants)
+      finaliseSrcsetVariants(srcsetVariants)
+
+      const sizesVal = sizeVariants.length ? sizeVariants.map(v => `${v.media ? v.media + ' ' : ''}${v.size}`).join(', ') : undefined
+      const suffix = sizesVal ? 'w' : 'x'
+      const srcsetVal = srcsetVariants.map(v => `${v.src} ${v.width}${suffix}`).join(', ')
+
+      const source: ImageSource = {
+        sizes: sizesVal,
+        srcset: srcsetVal,
+      }
+
+      if (keyAspectRatios != Object.keys(parsedAspectRatios).slice(-1)[0]) {
+        source.media = media
+      }
+      sources.push(source)
+    }
+    return sources
+  })
+
+  return {
+    placeHolderImage,
+    imageSources
+  }
+}
+
+export type { ImageSource }