kmcom-nuxt-layers 1.6.18 → 1.6.21

package/layers/content/app/components/Blog/Article.vue

@@ -1,25 +1,29 @@
 <script setup lang="ts">
+import type { BlogCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
+
+const asBlog = (item: unknown) => item as BlogCollectionItem
 </script>
 
 <template>
   <NuxtContentDetail collection="blog" :slug not-found-message="Blog post not found">
     <template #headline="{ item }">
       <div class="flex items-center gap-3 text-sm text-muted">
-        <time v-if="item.date">{{ new Date(item.date).toLocaleDateString() }}</time>
-        <UBadge v-if="item.badge" color="primary" variant="subtle">
-          {{ item.badge }}
+        <time v-if="asBlog(item).date">{{ new Date(asBlog(item).date).toLocaleDateString() }}</time>
+        <UBadge v-if="asBlog(item).badge" color="primary" variant="subtle">
+          {{ asBlog(item).badge }}
         </UBadge>
       </div>
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.tags?.length">
+      <template v-if="asBlog(item).tags?.length">
         <USeparator class="my-8" />
         <div class="flex flex-wrap gap-2">
-          <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle">
+          <UBadge v-for="tag in asBlog(item).tags" :key="tag" color="neutral" variant="subtle">
             {{ tag }}
           </UBadge>
         </div>

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

@@ -17,24 +17,27 @@ const {
   authors?: { name: string; avatar?: string; url?: string }[]
   to?: string
 }>()
+
+const postProps = computed(() => ({
+  ...(description !== undefined && { description }),
+  ...(date !== undefined && { date }),
+  ...(image !== undefined && { image }),
+  ...(badge !== undefined && { badge }),
+  ...(to !== undefined && { to }),
+}))
 </script>
 
 <template>
   <UBlogPost
     :title
-    :description
-    :date
-    :image
-    :badge
+    v-bind="postProps"
     :authors="
       authors.map((a) => ({
         name: a.name,
-        avatar: a.avatar ? { src: a.avatar } : undefined,
-        to: a.url,
-        target: a.url ? '_blank' : undefined,
+        ...(a.avatar && { avatar: { src: a.avatar } }),
+        ...(a.url && { to: a.url, target: '_blank' as const }),
       }))
     "
-    :to
     variant="outline"
   />
 </template>

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

@@ -19,20 +19,21 @@ const { data: posts, status } = await useBlogPosts(options)
         v-for="post in posts"
         :key="post.id"
         :title="post.title"
-        :description="post.description"
         :date="post.date"
-        :image="post.image"
-        :badge="post.badge"
-        :authors="
-          post.authors?.map((a) => ({
-            name: a.name,
-            avatar: a.avatar ? { src: a.avatar } : undefined,
-            to: a.url,
-            target: a.url ? '_blank' : undefined,
-          }))
-        "
         :to="post.path"
         variant="outline"
+        v-bind="{
+          ...(post.description !== undefined && { description: post.description }),
+          ...(post.image !== undefined && { image: post.image }),
+          ...(post.badge !== undefined && { badge: post.badge }),
+          ...(post.authors && {
+            authors: post.authors.map((a) => ({
+              name: a.name,
+              ...(a.avatar && { avatar: { src: a.avatar } }),
+              ...(a.url && { to: a.url, target: '_blank' as const }),
+            })),
+          }),
+        }"
       />
     </UBlogPosts>
   </NuxtContentList>

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

@@ -15,10 +15,15 @@ const {
   tags?: string[]
   to?: string
 }>()
+
+const cardProps = computed(() => ({
+  ...(description !== undefined && { description }),
+  ...(to !== undefined && { to }),
+}))
 </script>
 
 <template>
-  <UPageCard :title :description :to variant="outline">
+  <UPageCard :title v-bind="cardProps" variant="outline">
     <img
       v-if="coverImage"
       :src="coverImage.src"

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { GalleryCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
@@ -7,6 +9,8 @@ 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
+
 function openLightbox(
   images: { src: string; alt: string; width?: number; height?: number }[],
   index: number
@@ -21,21 +25,21 @@ function openLightbox(
   <NuxtContentDetail collection="gallery" :slug not-found-message="Gallery not found">
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
-        <span v-if="item.images?.length" class="text-sm text-muted">
-          {{ item.images.length }} image{{ item.images.length === 1 ? '' : 's' }}
+        <span v-if="asGallery(item).images?.length" class="text-sm text-muted">
+          {{ asGallery(item).images!.length }} image{{ asGallery(item).images!.length === 1 ? '' : 's' }}
         </span>
-        <UBadge v-for="tag in 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>
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.images?.length">
+      <template v-if="asGallery(item).images?.length">
         <USeparator class="my-8" />
         <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
           <div
-            v-for="(img, idx) in item.images"
+            v-for="(img, idx) in asGallery(item).images"
             :key="img.src"
             class="overflow-hidden rounded-lg group relative"
           >
@@ -55,7 +59,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(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/ImageDetail.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { GalleryCollectionItem } from '@nuxt/content'
+
 const { slug, index } = defineProps<{
   slug: string
   index: number
 }>()
 
-const { data: item } = await useCollectionItem('gallery', slug)
+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)
@@ -19,8 +22,11 @@ useSeoMeta({
 </script>
 
 <template>
-  <div v-if="item && image">
-    <UPageHeader :title="image.title || image.alt" :description="image.caption">
+  <div v-if="item && item.images && image">
+    <UPageHeader
+      :title="image.title || image.alt"
+      v-bind="image.caption ? { description: image.caption } : {}"
+    >
       <template #headline>
         <UBreadcrumb
           :items="[

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

@@ -15,10 +15,14 @@ const {
 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
+)
+
 useSeoMeta({
   title: item.value?.title,
   description: item.value?.description,
-  ogImage: item.value?.image,
+  ogImage: itemImage,
 })
 </script>
 
@@ -26,7 +30,7 @@ useSeoMeta({
   <div>
     <USkeleton v-if="status === 'pending'" class="h-96 w-full" />
     <UPage v-else-if="item">
-      <UPageHeader :title="item.title" :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" />
         </template>
@@ -45,7 +49,7 @@ useSeoMeta({
       </UPageBody>
 
       <template v-if="!hideToc" #right>
-        <NuxtContentToc :links="item.body?.toc?.links" />
+        <NuxtContentToc v-bind="item.body?.toc?.links ? { links: item.body.toc.links } : {}" />
       </template>
     </UPage>
     <div v-else class="text-muted text-center py-12">{{ notFoundMessage }}</div>

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

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

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

@@ -20,7 +20,11 @@ const {
 </script>
 
 <template>
-  <UPageCard :title :description :to variant="outline">
+  <UPageCard
+    :title
+    variant="outline"
+    v-bind="{ ...(description !== undefined && { description }), ...(to !== undefined && { to }) }"
+  >
     <img v-if="image" :src="image" :alt="title" class="w-full h-48 object-cover rounded" />
     <template #footer>
       <div class="flex flex-wrap gap-1.5">

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

@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import type { PortfolioCollectionItem } from '@nuxt/content'
+
 const { slug } = defineProps<{
   slug: string
 }>()
+
+const asPortfolio = (item: unknown) => item as PortfolioCollectionItem
 </script>
 
 <template>
@@ -13,13 +17,19 @@ const { slug } = defineProps<{
   >
     <template #headline="{ item }">
       <div class="flex flex-wrap items-center gap-2">
-        <UBadge v-if="item.client" color="primary" variant="subtle">
-          {{ item.client }}
+        <UBadge v-if="asPortfolio(item).client" color="primary" variant="subtle">
+          {{ asPortfolio(item).client }}
         </UBadge>
-        <UBadge v-if="item.year" color="neutral" variant="subtle">
-          {{ item.year }}
+        <UBadge v-if="asPortfolio(item).year" color="neutral" variant="subtle">
+          {{ asPortfolio(item).year }}
         </UBadge>
-        <UBadge v-for="tag in item.tags" :key="tag" color="neutral" variant="subtle" size="xs">
+        <UBadge
+          v-for="tag in asPortfolio(item).tags"
+          :key="tag"
+          color="neutral"
+          variant="subtle"
+          size="xs"
+        >
           {{ tag }}
         </UBadge>
       </div>
@@ -27,8 +37,8 @@ const { slug } = defineProps<{
 
     <template #links="{ item }">
       <UButton
-        v-if="item.url"
-        :to="item.url"
+        v-if="asPortfolio(item).url"
+        :to="asPortfolio(item).url"
         target="_blank"
         icon="i-lucide-external-link"
         variant="outline"
@@ -38,15 +48,26 @@ const { slug } = defineProps<{
     </template>
 
     <template #before-content="{ item }">
-      <img v-if="item.image" :src="item.image" :alt="item.title" class="w-full rounded-lg mb-8" />
+      <img
+        v-if="asPortfolio(item).image"
+        :src="asPortfolio(item).image"
+        :alt="item.title"
+        class="w-full rounded-lg mb-8"
+      />
     </template>
 
     <template #after-content="{ item }">
-      <template v-if="item.colors?.length || item.typography?.length">
+      <template v-if="asPortfolio(item).colors?.length || asPortfolio(item).typography?.length">
         <USeparator class="my-8" />
         <div class="space-y-8">
-          <PortfolioColorPalette v-if="item.colors?.length" :colors="item.colors" />
-          <PortfolioTypography v-if="item.typography?.length" :typography="item.typography" />
+          <PortfolioColorPalette
+            v-if="asPortfolio(item).colors?.length"
+            :colors="asPortfolio(item).colors!"
+          />
+          <PortfolioTypography
+            v-if="asPortfolio(item).typography?.length"
+            :typography="asPortfolio(item).typography!"
+          />
         </div>
       </template>
     </template>

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

@@ -19,9 +19,11 @@ const { data: items, status } = await usePortfolioItems(options)
         v-for="item in items"
         :key="item.id"
         :title="item.title"
-        :description="item.description"
-        :to="item.path"
         variant="outline"
+        v-bind="{
+          ...(item.description !== undefined && { description: item.description }),
+          to: item.path,
+        }"
       >
         <img
           v-if="item.image"

package/layers/content/app/composables/useCollectionItem.ts

@@ -1,5 +1,7 @@
+import type { Collections } from '@nuxt/content'
+
 export function useCollectionItem(collection: string, slug: string) {
   return useContentData(`${collection}-${slug}`, () =>
-    queryCollection(collection).path(`/${collection}/${slug}`).first()
+    queryCollection(collection as keyof Collections).path(`/${collection}/${slug}`).first()
   )
 }

package/layers/content/app/composables/useCollectionSurround.ts

@@ -1,9 +1,7 @@
-export function useCollectionSurround(
-  collection: string,
-  slug: string,
-  fields: string[] = ['description']
-) {
+import type { PageCollections } from '@nuxt/content'
+
+export function useCollectionSurround(collection: string, slug: string) {
   return useContentData(`${collection}-${slug}-surround`, () =>
-    queryCollectionItemSurroundings(collection, `/${collection}/${slug}`, { fields })
+    queryCollectionItemSurroundings(collection as keyof PageCollections, `/${collection}/${slug}`)
   )
 }

package/layers/content/app/types/content.ts

@@ -22,7 +22,7 @@ export interface PortfolioColor {
 
 export interface PortfolioFont {
   name: string
-  weights: string[]
+  weights?: string[]
   usage?: string
 }
 

package/layers/content/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:content": "CONTENT_STANDALONE=true nuxi dev",
     "dev:prepare": "nuxt prepare .playground",

package/layers/core/app/app.vue

@@ -3,5 +3,6 @@
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <UOverlayProvider />
   </UApp>
 </template>

package/layers/core/app/composables/useCache.ts

@@ -78,15 +78,14 @@ export function useCache() {
 
     try {
       const cacheNames = await caches.keys()
-      ;(await Promise.all(cacheNames.map((name) => caches.delete(name)))(
-        process.env.NODE_ENV === 'development'
-      ))
-        ? console.log('[useCache] All caches cleared')
-        : ''
+      await Promise.all(cacheNames.map((name) => caches.delete(name)))
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[useCache] All caches cleared')
+      }
     } catch (error) {
-      process.env.NODE_ENV === 'development'
-        ? console.error('[useCache] Failed to clear cache:', error)
-        : ''
+      if (process.env.NODE_ENV === 'development') {
+        console.error('[useCache] Failed to clear cache:', error)
+      }
     }
   }
 

package/layers/core/app/composables/useScrollGuard.ts

@@ -77,18 +77,6 @@ function clampElement(el: HTMLElement) {
   clampedCount.value++
 }
 
-function restoreElement(el: HTMLElement) {
-  const saved = clampedElements.get(el)
-  if (!saved) return
-
-  el.style.transition = saved.transition
-  el.style.maxWidth = saved.maxWidth
-  el.style.boxSizing = saved.boxSizing
-  el.style.overflowX = saved.overflowX
-
-  clampedElements.delete(el)
-  clampedSet.delete(el)
-}
 
 function guard() {
   if (!isEnabled.value || !opts) return

package/layers/core/app/plugins/init.ts

@@ -130,13 +130,14 @@ export default defineNuxtPlugin((nuxtApp) => {
     }
 
     // Test environment access (works on both server and client)
-    const env = useEnv()
+    const env = useEnv() as unknown as Record<string, unknown>
 
     if (isDev) {
+      const publicConfig = env.public as Record<string, unknown> | undefined
       // eslint-disable-next-line no-console
       console.log('[Core Layer] Environment config loaded:', {
-        hasPublicConfig: !!env.public,
-        publicKeys: Object.keys(env.public || {}),
+        hasPublicConfig: !!publicConfig,
+        publicKeys: Object.keys(publicConfig ?? {}),
       })
     }
   } catch (error) {

package/layers/core/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/core/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../apps/playground/tsconfig.json",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "ignoreDeprecations": "6.0"
   }
 }

package/layers/forms/app/components/Form/Contact.vue

@@ -17,11 +17,7 @@ const schema = z.object({
 
 type FormState = z.infer<typeof schema>
 
-const state = reactive<Partial<FormState>>({
-  name: undefined,
-  email: undefined,
-  message: undefined,
-})
+const state = reactive({ name: '', email: '', message: '' })
 
 const toast = useToast()
 const isLoading = ref(false)

package/layers/forms/app/components/Form/Field.vue

@@ -41,6 +41,36 @@ const resolvedIcon = computed(() => icon ?? config.value.icon)
 const isTextarea = computed(() => config.value.component === 'UTextarea')
 const isNumber = computed(() => config.value.component === 'UInputNumber')
 
+const formFieldProps = computed(() => ({
+  name,
+  required,
+  size,
+  ...(label !== undefined && { label }),
+  ...(className !== undefined && { class: className }),
+}))
+
+const baseInputProps = computed(() => ({
+  size,
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+}))
+
+const numberInputProps = computed(() => ({
+  size,
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+  ...(currencyOptions.value !== undefined && { formatOptions: currencyOptions.value }),
+}))
+
+const textInputProps = computed(() => ({
+  type: config.value.inputType,
+  size,
+  ...(config.value.inputMode !== undefined && { inputmode: config.value.inputMode }),
+  ...(config.value.autocomplete !== undefined && { autocomplete: config.value.autocomplete }),
+  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+}))
+
 const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
   if (config.value.format === 'currency') {
     return {
@@ -53,33 +83,15 @@ const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
 </script>
 
 <template>
-  <UFormField :name :label :required :size :class="className">
-    <UTextarea
-      v-if="isTextarea"
-      v-model="model as string"
-      :placeholder="resolvedPlaceholder"
-      :size
-      autoresize
-    />
+  <UFormField v-bind="formFieldProps">
+    <UTextarea v-if="isTextarea" v-model="model as string" autoresize v-bind="baseInputProps" />
 
     <UInputNumber
       v-else-if="isNumber"
       v-model="model as number"
-      :placeholder="resolvedPlaceholder"
-      :leading-icon="resolvedIcon"
-      :size
-      :format-options="currencyOptions"
+      v-bind="numberInputProps"
     />
 
-    <UInput
-      v-else
-      v-model="model as string"
-      :type="config.inputType"
-      :inputmode="config.inputMode"
-      :autocomplete="config.autocomplete"
-      :placeholder="resolvedPlaceholder"
-      :leading-icon="resolvedIcon"
-      :size
-    />
+    <UInput v-else v-model="model as string" v-bind="textInputProps" />
   </UFormField>
 </template>

package/layers/forms/package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",

package/layers/layout/app/components/Layout/Page/Container.vue

@@ -78,7 +78,13 @@ provide('pageTitle', title)
     <!-- Optional visible header -->
     <LayoutSection v-if="showHeader">
       <LayoutGridItem :preset="headerPreset">
-        <LayoutPageHeader :title :description :back />
+        <LayoutPageHeader
+          :title
+          v-bind="{
+            ...(description !== undefined && { description }),
+            ...(back !== undefined && { back }),
+          }"
+        />
       </LayoutGridItem>
     </LayoutSection>
 

package/layers/layout/app/components/Layout/Page/index.vue

@@ -60,7 +60,10 @@ provide('pageTitle', title)
   <!-- Optional visible page header — rendered as a grid section -->
   <LayoutSection v-if="showHeader">
     <LayoutGridItem preset="centered">
-      <LayoutPageHeader :title :description />
+      <LayoutPageHeader
+        :title
+        v-bind="description !== undefined ? { description } : {}"
+      />
     </LayoutGridItem>
   </LayoutSection>
 

package/layers/layout/package.json

@@ -4,6 +4,7 @@
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
   "scripts": {
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",