kmcom-nuxt-layers 1.1.7 → 1.1.8

package/layers/core/app/components/ErrorBoundary.vue

@@ -34,11 +34,11 @@ interface Props {
   componentName?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  showDetails: true,
-  message: 'Something went wrong in this section.',
-  componentName: 'Unknown',
-})
+const {
+  showDetails = true,
+  message = 'Something went wrong in this section.',
+  componentName = 'Unknown',
+} = defineProps<Props>()
 
 const { logError } = useErrorLog()
 
@@ -46,7 +46,7 @@ const { logError } = useErrorLog()
 const handleError = (error: unknown) => {
   // Log error with context
   logError(error, {
-    component: props.componentName,
+    component: componentName,
     info: 'Error caught by ErrorBoundary',
   })
 }

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
 /**
  * PageContainer - Unified page wrapper component
@@ -39,12 +38,6 @@
  * </PageContainer>
  */
 
-const props = withDefaults(defineProps<Props>(), {
-  showHeader: true,
-  headerPreset: 'centered',
-  layout: 'grid',
-})
-
 interface Props {
   title: string
   description?: string
@@ -53,20 +46,28 @@ interface Props {
   layout?: 'grid' | 'upage'
 }
 
+const {
+  title,
+  description,
+  showHeader = true,
+  headerPreset = 'centered',
+  layout = 'grid',
+} = defineProps<Props>()
+
 // Set page metadata for SEO and browser tab
 useHead({
-  title: props.title,
-  meta: props.description
+  title,
+  meta: description
     ? [
-        { name: 'description', content: props.description },
-        { property: 'og:title', content: props.title },
-        { property: 'og:description', content: props.description },
+        { name: 'description', content: description },
+        { property: 'og:title', content: title },
+        { property: 'og:description', content: description },
       ]
     : undefined,
 })
 
 // Provide title to child components (e.g., for breadcrumbs, schema.org)
-provide('pageTitle', props.title)
+provide('pageTitle', title)
 </script>
 
 <template>

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

@@ -14,10 +14,7 @@ interface Props {
   fullWidth?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
-  fullHeight: false,
-  fullWidth: false,
-})
+const { fullHeight = false, fullWidth = false } = defineProps<Props>()
 </script>
 
 <template>

package/layers/ui/app/components/Links/Group.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+// eslint-disable-next-line no-restricted-imports
 import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
 
 export default defineComponent({
@@ -13,25 +14,32 @@ export default defineComponent({
 
     return () => {
       const children = (slots.default?.() ?? [])
-        .flatMap(node => node.type === Fragment ? (node.children as VNode[]) : [node])
-        .filter(node => typeof node.type === 'string' || typeof node.type === 'object')
+        .flatMap((node) => (node.type === Fragment ? (node.children as VNode[]) : [node]))
+        .filter((node) => typeof node.type === 'string' || typeof node.type === 'object')
 
       const styledChildren = children.map((vnode, index) =>
         cloneVNode(vnode, {
-          onMouseenter: () => { hoveredIndex.value = index },
+          onMouseenter: () => {
+            hoveredIndex.value = index
+          },
           style: {
-            opacity: hoveredIndex.value !== null && hoveredIndex.value !== index
-              ? props.dimOpacity
-              : 1,
+            opacity:
+              hoveredIndex.value !== null && hoveredIndex.value !== index ? props.dimOpacity : 1,
             transition: `opacity ${props.duration}ms ease-out`,
           },
-        }),
+        })
       )
 
-      return h(props.tag, {
-        ...attrs,
-        onMouseleave: () => { hoveredIndex.value = null },
-      }, styledChildren)
+      return h(
+        props.tag,
+        {
+          ...attrs,
+          onMouseleave: () => {
+            hoveredIndex.value = null
+          },
+        },
+        styledChildren
+      )
     }
   },
 })

package/layers/ui/app/components/Links/Named.vue

@@ -2,22 +2,20 @@
 import { useColor } from '../../composables/color'
 import type { UiColors } from '../../types/colors'
 
-const props = withDefaults(
-  defineProps<{
-    name: string
-    params?: Record<string, string>
-    query?: Record<string, string>
-    variant?: string
-    color?: UiColors
-  }>(),
-  {
-    params: undefined,
-    query: undefined,
-    variant: undefined,
-    color: undefined,
-  }
-)
-const colorClass = useColor(props.color, 'text')
+const {
+  name,
+  params = undefined,
+  query = undefined,
+  variant = undefined,
+  color = undefined,
+} = defineProps<{
+  name: string
+  params?: Record<string, string>
+  query?: Record<string, string>
+  variant?: string
+  color?: UiColors
+}>()
+const colorClass = useColor(color, 'text')
 </script>
 
 <template>

package/layers/ui/app/components/Media/Picture.vue

@@ -1,41 +1,50 @@
-<!-- eslint-disable vue/define-macros-order -->
 <script lang="ts" setup>
 import { usePicture } from '../../composables/picture'
 import type { PictureProps } from '../../types/media'
 
-const props = withDefaults(defineProps<PictureProps>(), {
-  loading: 'lazy',
-  decoding: 'async',
-  format: 'webp',
-  sizes: '100vw',
-  fit: 'cover',
-  fetchpriority: 'auto',
-  quality: 80,
-  class: '',
-  imgClass: '',
-})
+const {
+  src,
+  alt,
+  width,
+  height,
+  sizes = '100vw',
+  format = 'webp',
+  quality = 80,
+  fit = 'cover',
+  loading = 'lazy',
+  fetchpriority = 'auto',
+  decoding = 'async',
+  provider,
+  preset,
+  densities,
+  class: wrapperClass = '',
+  imgClass = '',
+} = defineProps<PictureProps>()
 
-const { sizesString, computedFormat } = usePicture(props)
+const { sizesString, computedFormat } = usePicture(
+  () => sizes,
+  () => format
+)
 </script>
 
 <template>
   <NuxtPicture
-    :src="props.src"
-    :alt="props.alt"
-    :width="props.width"
-    :height="props.height"
+    :src
+    :alt
+    :width
+    :height
     :sizes="sizesString"
     :format="computedFormat"
-    :quality="props.quality"
-    :fit="props.fit"
-    :loading="props.loading"
-    :fetchpriority="props.fetchpriority"
-    :decoding="props.decoding"
-    :provider="props.provider"
-    :preset="props.preset"
-    :densities="props.densities"
-    :class="props.class"
-    :img-attrs="{ class: props.imgClass }"
+    :quality
+    :fit
+    :loading
+    :fetchpriority
+    :decoding
+    :provider
+    :preset
+    :densities
+    :class="wrapperClass"
+    :img-attrs="{ class: imgClass }"
     v-bind="$attrs"
   />
 </template>

package/layers/ui/app/composables/picture.ts

@@ -1,3 +1,4 @@
+import type { MaybeRefOrGetter } from 'vue'
 import {
   BREAKPOINT_VALUES,
   DEVICE_BREAKPOINT_VALUES,
@@ -111,32 +112,21 @@ function responsiveSizesToString(sizes: ResponsiveSizes): string {
  *
  * @example
  * ```ts
- * const { sizesString, computedFormat, imgAttrs } = usePicture(props)
+ * const { sizesString, computedFormat } = usePicture(() => sizes, () => format)
  * ```
  */
-export function usePicture(props: Partial<PictureProps>): UsePictureReturn {
-  /**
-   * Compute sizes attribute string
-   * Handles both string and ResponsiveSizes object formats
-   */
+export function usePicture(
+  sizes: MaybeRefOrGetter<PictureProps['sizes']>,
+  format?: MaybeRefOrGetter<PictureProps['format']>
+): UsePictureReturn {
   const sizesString = computed(() => {
-    if (!props.sizes) {
-      return '100vw' // Default to full viewport width
-    }
-
-    if (typeof props.sizes === 'string') {
-      return props.sizes
-    }
-
-    return responsiveSizesToString(props.sizes)
+    const s = toValue(sizes)
+    if (!s) return '100vw'
+    if (typeof s === 'string') return s
+    return responsiveSizesToString(s)
   })
 
-  /**
-   * Compute format string with fallback
-   */
-  const computedFormat = computed(() => {
-    return props.format ?? 'webp'
-  })
+  const computedFormat = computed(() => toValue(format) ?? 'webp')
 
   return {
     sizesString,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -24,7 +24,7 @@
     "@nuxt/content": "^3.0.0",
     "@nuxt/eslint": "^1.0.0",
     "@nuxt/image": "^2.0.0",
-    "@nuxt/ui": "^4.0.0",
+    "@nuxt/ui": "^4.5.0",
     "@nuxtjs/device": "^4.0.0",
     "@tresjs/cientos": "^5.0.0",
     "@tresjs/core": "^5.0.0",
@@ -38,7 +38,7 @@
     "nuxt": "^4.0.0",
     "nuxt-studio": "^1.0.0",
     "pinia": "^3.0.0",
-    "tailwindcss": "^4.2.0",
+    "tailwindcss": "^4.2.1",
     "three": "^0.170.0",
     "zod": "^3.20.0"
   },
@@ -90,11 +90,11 @@
     "@commitlint/cli": "^20.4.1",
     "@commitlint/config-conventional": "^20.4.1",
     "@culur/config-stylelint": "^1.6.4",
-    "@eslint/json": "^1.0.0",
+    "@eslint/json": "^1.0.1",
     "@eslint/markdown": "^7.5.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@iconify-json/lucide": "^1.2.89",
-    "@nuxt/eslint": "^1.14.0",
+    "@nuxt/eslint": "^1.15.2",
     "@nuxt/fonts": "^0.13.0",
     "@nuxt/image": "^2.0.0",
     "@nuxt/ui": "latest",
@@ -102,8 +102,8 @@
     "@perplex-digital/stylelint-config": "^17.3.0",
     "@pinia/nuxt": "^0.11.3",
     "@types/node": "^25.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vueuse/core": "^14.2.1",
     "@vueuse/nuxt": "^14.2.1",
@@ -112,16 +112,16 @@
     "changesets": "^1.0.2",
     "cypress": "^15.10.0",
     "depcheck": "^1.4.7",
-    "eslint": "^10.0.0",
-    "eslint-plugin-compat": "^6.1.0",
+    "eslint": "^10.0.2",
+    "eslint-plugin-compat": "^6.2.0",
     "eslint-plugin-glsl": "0.0.0-wip",
-    "eslint-plugin-oxlint": "^1.43.0",
-    "eslint-plugin-pnpm": "^1.5.0",
+    "eslint-plugin-oxlint": "^1.50.0",
+    "eslint-plugin-pnpm": "^1.6.0",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-unicorn": "^62.0.0",
+    "eslint-plugin-unicorn": "^63.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
     "eslint-plugin-vue": "^10.8.0",
-    "npm-check-updates": "^19.3.2",
+    "npm-check-updates": "^19.5.0",
     "nuxt": "latest",
     "oxlint": "^1.43.0",
     "pinia": "^3.0.4",
@@ -140,7 +140,7 @@
     "stylelint-config-tailwindcss": "^1.0.1",
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
-    "tailwindcss": "^4.2.0",
+    "tailwindcss": "^4.2.1",
     "turbo": "^2.8.10",
     "typescript": "^5.9.3",
     "vite-plugin-checker": "^0.12.0",