kmcom-nuxt-layers 1.7.8 → 2.1.6

package/layers/content/app/components/Gallery/AmbientImage.vue

@@ -1,18 +1,18 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  src,
-  alt = '',
-  width,
-  height,
-  caption,
-} = defineProps<{
-  src: string
-  alt?: string
-  width?: number
-  height?: number
-  caption?: string
-}>()
+  const {
+    src,
+    alt = '',
+    width,
+    height,
+    caption,
+  } = defineProps<{
+    src: string
+    alt?: string
+    width?: number
+    height?: number
+    caption?: string
+  }>()
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const {
       <Teleport to="body">
         <div class="fixed inset-0 z-0 pointer-events-none overflow-hidden" aria-hidden="true">
           <img
-            :src="src"
+            :src
             alt=""
             class="absolute inset-0 w-full h-full object-cover blur-[100px] opacity-30 saturate-150 scale-125"
           />
@@ -36,7 +36,7 @@ const {
 
     <!-- Main image in normal flow -->
     <figure class="my-6">
-      <img :src="src" :alt="alt" :width="width" :height="height" class="w-full rounded-lg" />
+      <img :src :alt :width :height class="w-full rounded-lg" />
       <figcaption v-if="caption" class="mt-3 text-center text-sm text-muted italic">
         {{ caption }}
       </figcaption>

package/layers/content/app/components/Gallery/Card.vue

@@ -1,25 +1,25 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  title,
-  description,
-  coverImage,
-  imageCount = 0,
-  tags = [],
-  to,
-} = defineProps<{
-  title: string
-  description?: string
-  coverImage?: { src: string; alt: string }
-  imageCount?: number
-  tags?: string[]
-  to?: string
-}>()
+  const {
+    title,
+    description,
+    coverImage,
+    imageCount = 0,
+    tags = [],
+    to,
+  } = defineProps<{
+    title: string
+    description?: string
+    coverImage?: { src: string; alt: string }
+    imageCount?: number
+    tags?: string[]
+    to?: string
+  }>()
 
-const cardProps = computed(() => ({
-  ...(description !== undefined && { description }),
-  ...(to !== undefined && { to }),
-}))
+  const cardProps = computed(() => ({
+    ...(description !== undefined && { description }),
+    ...(to !== undefined && { to }),
+  }))
 </script>
 
 <template>

package/layers/content/app/components/Gallery/Detail.vue

@@ -1,25 +1,26 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { GalleryCollectionItem } from '@nuxt/content'
+  // @ts-nocheck
+  import type { GalleryCollectionItem } from '@nuxt/content'
 
-const { slug } = defineProps<{
-  slug: string
-}>()
+  const { slug } = defineProps<{
+    slug: string
+  }>()
 
-const lightboxOpen = ref(false)
-const lightboxIndex = ref(0)
-const lightboxImages = ref<{ src: string; alt: string; width?: number; height?: number }[]>([])
+  const lightboxOpen = ref(false)
+  const lightboxIndex = ref(0)
+  const lightboxImages = ref<{ src: string; alt: string; width?: number; height?: number }[]>([])
 
-const asGallery = (item: unknown) => item as GalleryCollectionItem
+  const asGallery = (item: unknown) => item as GalleryCollectionItem
 
-function openLightbox(
-  images: { src: string; alt: string; width?: number; height?: number }[],
-  index: number
-) {
-  lightboxImages.value = images
-  lightboxIndex.value = index
-  lightboxOpen.value = true
-}
+  function openLightbox(
+    images: { src: string; alt: string; width?: number; height?: number }[],
+    index: number
+  ) {
+    lightboxImages.value = images
+    lightboxIndex.value = index
+    lightboxOpen.value = true
+  }
 </script>
 
 <template>
@@ -27,9 +28,17 @@ function openLightbox(
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
         <span v-if="asGallery(item).images?.length" class="text-sm text-muted">
-          {{ asGallery(item).images!.length }} image{{ asGallery(item).images!.length === 1 ? '' : 's' }}
+          {{ asGallery(item).images!.length }} image{{
+            asGallery(item).images!.length === 1 ? '' : 's'
+          }}
         </span>
-        <UBadge v-for="tag in asGallery(item).tags" :key="tag" color="neutral" variant="subtle" size="xs">
+        <UBadge
+          v-for="tag in asGallery(item).tags"
+          :key="tag"
+          color="neutral"
+          variant="subtle"
+          size="xs"
+        >
           {{ tag }}
         </UBadge>
       </div>
@@ -60,7 +69,7 @@ function openLightbox(
             </NuxtLink>
             <button
               class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 cursor-pointer"
-              @click.stop="openLightbox(asGallery(item).images!, idx)"
+              @click.stop="() => openLightbox(asGallery(item).images!, idx)"
             >
               <UIcon name="i-lucide-expand" class="size-4" />
             </button>

package/layers/content/app/components/Gallery/Grid.vue

@@ -1,20 +1,17 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { GalleryQueryOptions } from '../../types/content'
+  // @ts-nocheck
+  import type { GalleryQueryOptions } from '../../types/content'
 
-const { options = {} } = defineProps<{
-  options?: GalleryQueryOptions
-}>()
+  const { options = {} } = defineProps<{
+    options?: GalleryQueryOptions
+  }>()
 
-const { data: items, status } = await useGalleryItems(options)
+  const { data: items, status } = await useGalleryItems(options)
 </script>
 
 <template>
-  <NuxtContentList
-    :status="status"
-    :has-items="!!items?.length"
-    empty-message="No gallery items found"
-  >
+  <NuxtContentList :status :has-items="!!items?.length" empty-message="No gallery items found">
     <UPageGrid>
       <NuxtLink
         v-for="item in items"

package/layers/content/app/components/Gallery/ImageDetail.vue

@@ -1,25 +1,26 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { GalleryCollectionItem } from '@nuxt/content'
+  // @ts-nocheck
+  import type { GalleryCollectionItem } from '@nuxt/content'
 
-const { slug, index } = defineProps<{
-  slug: string
-  index: number
-}>()
+  const { slug, index } = defineProps<{
+    slug: string
+    index: number
+  }>()
 
-const { data: rawItem } = await useCollectionItem('gallery', slug)
-const item = computed(() => rawItem.value as GalleryCollectionItem | null)
+  const { data: rawItem } = await useCollectionItem('gallery', slug)
+  const item = computed(() => rawItem.value as GalleryCollectionItem | null)
 
-const image = computed(() => item.value?.images?.[index])
-const totalImages = computed(() => item.value?.images?.length ?? 0)
-const hasPrevious = computed(() => index > 0)
-const hasNext = computed(() => index < totalImages.value - 1)
+  const image = computed(() => item.value?.images?.[index])
+  const totalImages = computed(() => item.value?.images?.length ?? 0)
+  const hasPrevious = computed(() => index > 0)
+  const hasNext = computed(() => index < totalImages.value - 1)
 
-useSeoMeta({
-  title: () => image.value?.title || image.value?.alt || `Image ${index + 1}`,
-  description: () => image.value?.caption || item.value?.title,
-  ogImage: () => image.value?.src,
-})
+  useSeoMeta({
+    title: () => image.value?.title || image.value?.alt || `Image ${index + 1}`,
+    description: () => image.value?.caption || item.value?.title,
+    ogImage: () => image.value?.src,
+  })
 </script>
 
 <template>

package/layers/content/app/components/Gallery/ImagePage.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-const { contentLayer } = useAppConfig()
-if (contentLayer?.sections?.gallery === false) {
-  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-}
-
-const { slug, index } = defineProps<{
-  slug: string
-  index: number
-}>()
+  const { slug, index } = defineProps<{
+    slug: string
+    index: number
+  }>()
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
 </script>
 
 <template>

package/layers/content/app/components/Gallery/Lightbox.vue

@@ -1,46 +1,50 @@
 <script setup lang="ts">
-import type { GalleryImage } from '../../types/content'
+  import type { GalleryImage } from '../../types/content'
 
-const { images = [], initialIndex = 0 } = defineProps<{
-  images?: GalleryImage[]
-  initialIndex?: number
-}>()
+  const { images = [], initialIndex = 0 } = defineProps<{
+    images?: GalleryImage[]
+    initialIndex?: number
+  }>()
 
-const open = defineModel<boolean>('open', { default: false })
+  const open = defineModel<boolean>('open', { default: false })
 
-const currentIndex = ref(initialIndex)
+  const currentIndex = ref(initialIndex)
 
-watch(
-  () => initialIndex,
-  (value) => {
-    currentIndex.value = value
-  }
-)
+  watch(
+    () => initialIndex,
+    (value) => {
+      currentIndex.value = value
+    }
+  )
+
+  const currentImage = computed(() => images[currentIndex.value])
+  const hasPrevious = computed(() => currentIndex.value > 0)
+  const hasNext = computed(() => currentIndex.value < images.length - 1)
 
-const currentImage = computed(() => images[currentIndex.value])
-const hasPrevious = computed(() => currentIndex.value > 0)
-const hasNext = computed(() => currentIndex.value < images.length - 1)
+  function previous() {
+    if (hasPrevious.value) currentIndex.value--
+  }
 
-function previous() {
-  if (hasPrevious.value) currentIndex.value--
-}
+  function next() {
+    if (hasNext.value) currentIndex.value++
+  }
 
-function next() {
-  if (hasNext.value) currentIndex.value++
-}
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowLeft') previous()
+    else if (event.key === 'ArrowRight') next()
+  }
 
-function onKeydown(event: KeyboardEvent) {
-  if (event.key === 'ArrowLeft') previous()
-  else if (event.key === 'ArrowRight') next()
-}
+  function open() {
+    open = false
+  }
 
-onMounted(() => {
-  globalThis.addEventListener('keydown', onKeydown)
-})
+  onMounted(() => {
+    globalThis.addEventListener('keydown', onKeydown)
+  })
 
-onUnmounted(() => {
-  globalThis.removeEventListener('keydown', onKeydown)
-})
+  onUnmounted(() => {
+    globalThis.removeEventListener('keydown', onKeydown)
+  })
 </script>
 
 <template>
@@ -57,8 +61,9 @@ onUnmounted(() => {
           color="neutral"
           variant="ghost"
           class="absolute top-4 right-4 text-white"
-          @click="open = false"
+          @click="open"
         />
+        <!-- @click="open = false" -->
 
         <!-- Prev -->
         <UButton

package/layers/content/app/components/Gallery/Page.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-const { contentLayer } = useAppConfig()
-if (contentLayer?.sections?.gallery === false) {
-  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-}
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
 
-useSeoMeta({
-  title: 'Gallery',
-  description: 'Photo collections and visual work',
-})
+  useSeoMeta({
+    title: 'Gallery',
+    description: 'Photo collections and visual work',
+  })
 </script>
 
 <template>

package/layers/content/app/components/Gallery/SlugPage.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-const { contentLayer } = useAppConfig()
-if (contentLayer?.sections?.gallery === false) {
-  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-}
-
-const { slug } = defineProps<{
-  slug: string
-}>()
+  const { slug } = defineProps<{
+    slug: string
+  }>()
+  const { contentLayer } = useAppConfig()
+  if (contentLayer?.sections?.gallery === false) {
+    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+  }
 </script>
 
 <template>

package/layers/content/app/components/NuxtContent/Detail.vue

@@ -1,49 +1,51 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-// @ts-nocheck
-const {
-  collection,
-  slug,
-  notFoundMessage = 'Content not found',
-  hideToc = false,
-} = defineProps<{
-  collection: string
-  slug: string
-  notFoundMessage?: string
-  hideToc?: boolean
-}>()
+  // @ts-nocheck
+  const {
+    collection,
+    slug,
+    notFoundMessage = 'Content not found',
+    hideToc = false,
+  } = defineProps<{
+    collection: string
+    slug: string
+    notFoundMessage?: string
+    hideToc?: boolean
+  }>()
 
-const { data: item, status } = await useCollectionItem(collection, slug)
-const { data: surround } = await useCollectionSurround(collection, slug)
+  const { data: item, status } = await useCollectionItem(collection, slug)
+  const { data: surround } = await useCollectionSurround(collection, slug)
 
-const itemImage = computed(
-  () => (item.value as { image?: string } | null)?.image
-)
+  const itemImage = computed(() => (item.value as { image?: string } | null)?.image)
 
-useSeoMeta({
-  title: item.value?.title,
-  description: item.value?.description,
-  ogImage: itemImage,
-})
+  useSeoMeta({
+    title: item.value?.title,
+    description: item.value?.description,
+    ogImage: itemImage,
+  })
 </script>
 
 <template>
   <div>
     <USkeleton v-if="status === 'pending'" class="h-96 w-full" />
     <UPage v-else-if="item">
-      <UPageHeader :title="item.title" v-bind="item.description ? { description: item.description } : {}">
+      <UPageHeader
+        :title="item.title"
+        v-bind="item.description ? { description: item.description } : {}"
+      >
         <template v-if="$slots.headline" #headline>
-          <slot name="headline" :item="item" />
+          <slot name="headline" :item />
         </template>
         <template v-if="$slots.links" #links>
-          <slot name="links" :item="item" />
+          <slot name="links" :item />
         </template>
       </UPageHeader>
 
       <UPageBody>
-        <slot name="before-content" :item="item" />
+        <slot name="before-content" :item />
         <ContentRenderer :value="item" />
-        <slot name="after-content" :item="item" />
+        <slot name="after-content" :item />
 
         <USeparator class="my-8" />
         <NuxtContentSurround :surround="surround as any" />

package/layers/content/app/components/NuxtContent/List.vue

@@ -1,13 +1,14 @@
+<!-- eslint-disable vue/no-boolean-default -->
 <script setup lang="ts">
-const {
-  status,
-  hasItems = true,
-  emptyMessage = 'No items found',
-} = defineProps<{
-  status: string
-  hasItems?: boolean
-  emptyMessage?: string
-}>()
+  const {
+    status,
+    hasItems = true,
+    emptyMessage = 'No items found',
+  } = defineProps<{
+    status: string
+    hasItems?: boolean
+    emptyMessage?: string
+  }>()
 </script>
 
 <template>

package/layers/content/app/components/NuxtContent/Renderer.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-const { value, loading = false } = defineProps<{
-  value: unknown
-  loading?: boolean
-}>()
+  const { value, loading = false } = defineProps<{
+    value: unknown
+    loading?: boolean
+  }>()
 </script>
 
 <template>

package/layers/content/app/components/NuxtContent/Surround.vue

@@ -1,8 +1,8 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const { surround } = defineProps<{
-  surround?: unknown[]
-}>()
+  const { surround } = defineProps<{
+    surround?: unknown[]
+  }>()
 </script>
 
 <template>

package/layers/content/app/components/NuxtContent/Toc.vue

@@ -1,11 +1,11 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-import type { TocLink } from '@nuxt/content'
+  import type { TocLink } from '@nuxt/content'
 
-const { links, title = 'Table of Contents' } = defineProps<{
-  links?: TocLink[]
-  title?: string
-}>()
+  const { links, title = 'Table of Contents' } = defineProps<{
+    links?: TocLink[]
+    title?: string
+  }>()
 </script>
 
 <template>

package/layers/content/app/components/Portfolio/Card.vue

@@ -1,22 +1,22 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-const {
-  title,
-  description,
-  image,
-  tags = [],
-  client,
-  year,
-  to,
-} = defineProps<{
-  title: string
-  description?: string
-  image?: string
-  tags?: string[]
-  client?: string
-  year?: number
-  to?: string
-}>()
+  const {
+    title,
+    description,
+    image,
+    tags = [],
+    client,
+    year,
+    to,
+  } = defineProps<{
+    title: string
+    description?: string
+    image?: string
+    tags?: string[]
+    client?: string
+    year?: number
+    to?: string
+  }>()
 </script>
 
 <template>

package/layers/content/app/components/Portfolio/ColorPalette.vue

@@ -1,18 +1,18 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-import type { PortfolioColor } from '../../types/content'
+  import type { PortfolioColor } from '../../types/content'
 
-const { colors = [] } = defineProps<{
-  colors?: PortfolioColor[]
-}>()
+  const { colors = [] } = defineProps<{
+    colors?: PortfolioColor[]
+  }>()
 
-function contrastColor(hex: string): string {
-  const r = parseInt(hex.slice(1, 3), 16)
-  const g = parseInt(hex.slice(3, 5), 16)
-  const b = parseInt(hex.slice(5, 7), 16)
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
-  return luminance > 0.6 ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.9)'
-}
+  function contrastColor(hex: string): string {
+    const r = parseInt(hex.slice(1, 3), 16)
+    const g = parseInt(hex.slice(3, 5), 16)
+    const b = parseInt(hex.slice(5, 7), 16)
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+    return luminance > 0.6 ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.9)'
+  }
 </script>
 
 <template>

package/layers/content/app/components/Portfolio/Detail.vue

@@ -1,22 +1,18 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import type { PortfolioCollectionItem } from '@nuxt/content'
+  // @ts-nocheck
+  import type { PortfolioCollectionItem } from '@nuxt/content'
 
-const { slug, collection = 'portfolio' } = defineProps<{
-  slug: string
-  collection?: string
-}>()
+  const { slug, collection = 'portfolio' } = defineProps<{
+    slug: string
+    collection?: string
+  }>()
 
-const asPortfolio = (item: unknown) => item as PortfolioCollectionItem
+  const asPortfolio = (item: unknown) => item as PortfolioCollectionItem
 </script>
 
 <template>
-  <NuxtContentDetail
-    :collection
-    :slug
-    not-found-message="Item not found"
-    hide-toc
-  >
+  <NuxtContentDetail :collection :slug not-found-message="Item not found" hide-toc>
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
         <UBadge v-if="asPortfolio(item).client" color="primary" variant="subtle">