kmcom-nuxt-layers 5.0.2 → 5.0.4

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

@@ -47,7 +47,7 @@
   <UModal
     v-model:open="open"
     fullscreen
-    :ui="{ content: 'bg-black/95 flex items-center justify-center' }"
+    :ui="{ content: 'flex items-center justify-center bg-black/95' }"
   >
     <template #content>
       <div class="relative flex h-full w-full items-center justify-center p-4">

package/layers/structure/navigation/app/components/Links/Named.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import type { LinkProps } from '@nuxt/ui'
   import type { UiColors } from '#layers/typography/types/colors'
 
   defineOptions({ inheritAttrs: false })
@@ -17,15 +18,14 @@
     color?: UiColors
   }>()
   const colorClass = useColor(color, 'text')
+  // `name` is a plain string here, not one of the app's typed route names
+  const to = computed(
+    () => ({ name, params: params ?? {}, query: query ?? {} }) as unknown as LinkProps['to']
+  )
 </script>
 
 <template>
-  <ULink
-    :to="{ name: name, params: params, query: query }"
-    :variant
-    :class="colorClass"
-    v-bind="$attrs"
-  >
+  <ULink :to :variant :class="colorClass" v-bind="$attrs">
     <slot />
   </ULink>
 </template>

package/layers/structure/navigation/app/components/Mast/NavModal.vue

@@ -14,6 +14,7 @@
   const activeSection = useState<string>('activeSection', () => '')
   const route = useRoute()
   const { close: closeNav } = useMastNav()
+  const { useZIndex } = useGridConfig()
 
   function dismiss() {
     emit('update:open', false)
@@ -38,7 +39,7 @@
     <div
       v-if="open"
       class="bg-default text-default fixed inset-0 flex flex-col items-center justify-center"
-      :style="{ zIndex: useGridConfig().useZIndex('modal') }"
+      :style="{ zIndex: useZIndex('modal') }"
     >
       <button
         class="absolute top-[3vh] right-[5vw] cursor-pointer border-0 bg-transparent p-2"

package/layers/structure/navigation/app/components/Site/Subtitle.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+  const site = useSite()
+</script>
+
 <template>
-  <span v-for="(word, index) in useSite().subtitleWords" :key="index" class="site-word">
+  <span v-for="(word, index) in site.subtitleWords" :key="index" class="site-word">
     {{ word }}
   </span>
 </template>

package/layers/structure/navigation/app/components/Site/Title.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+  const site = useSite()
+</script>
+
 <template>
-  <span v-for="(word, index) in useSite().titleWords" :key="index" class="site-word">
+  <span v-for="(word, index) in site.titleWords" :key="index" class="site-word">
     {{ word }}
   </span>
 </template>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",