kmcom-nuxt-layers 1.5.1 → 1.6.1

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

@@ -3,7 +3,7 @@ import type { BlogQueryOptions } from '../types/content'
 export function useBlogPosts(options: BlogQueryOptions = {}) {
   const { excludeDrafts = true, tags, limit } = options
 
-  return useAsyncData('blog-posts', async () => {
+  return useContentData('blog-posts', async () => {
     let posts = await queryCollection('blog').order('date', 'DESC').all()
 
     if (excludeDrafts) {

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

@@ -1,5 +1,5 @@
 export function useCollectionItem(collection: string, slug: string) {
-  return useAsyncData(`${collection}-${slug}`, () =>
+  return useContentData(`${collection}-${slug}`, () =>
     queryCollection(collection).path(`/${collection}/${slug}`).first()
   )
 }

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

@@ -3,7 +3,7 @@ export function useCollectionSurround(
   slug: string,
   fields: string[] = ['description']
 ) {
-  return useAsyncData(`${collection}-${slug}-surround`, () =>
+  return useContentData(`${collection}-${slug}-surround`, () =>
     queryCollectionItemSurroundings(collection, `/${collection}/${slug}`, { fields })
   )
 }

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

@@ -0,0 +1,3 @@
+export const useContentData = createUseAsyncData({
+  dedupe: 'cancel',
+})

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

@@ -1,3 +1,3 @@
 export function useContentPage(path: string) {
-  return useAsyncData(`content-page-${path}`, () => queryCollection('content').path(path).first())
+  return useContentData(`content-page-${path}`, () => queryCollection('content').path(path).first())
 }

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

@@ -3,7 +3,7 @@ import type { GalleryQueryOptions } from '../types/content'
 export function useGalleryItems(options: GalleryQueryOptions = {}) {
   const { tags, limit } = options
 
-  return useAsyncData('gallery-items', async () => {
+  return useContentData('gallery-items', async () => {
     let items = await queryCollection('gallery').order('date', 'DESC').all()
 
     if (tags?.length) {

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

@@ -3,7 +3,7 @@ import type { PortfolioQueryOptions } from '../types/content'
 export function usePortfolioItems(options: PortfolioQueryOptions = {}) {
   const { featured, tags, limit } = options
 
-  return useAsyncData('portfolio-items', async () => {
+  return useContentData('portfolio-items', async () => {
     let items = await queryCollection('portfolio').order('year', 'DESC').all()
 
     if (featured !== undefined) {

package/layers/forms/app/composables/useFormsFetch.ts

@@ -0,0 +1,3 @@
+export const useFormsFetch = createUseFetch({
+  baseURL: '/api/forms',
+})

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

@@ -84,9 +84,6 @@ provide('pageTitle', title)
 
     <!-- Main content slot -->
     <slot />
-
-    <!-- Grid debugging helper -->
-    <LayoutGridDebug />
   </template>
 
   <!-- UPage Layout Mode - needs wrapper with MastMain -->
@@ -96,8 +93,5 @@ provide('pageTitle', title)
         <slot />
       </UPage>
     </MastMain>
-
-    <!-- Grid debugging helper -->
-    <LayoutGridDebug />
   </div>
 </template>

package/layers/ui/app/app.config.ts

@@ -1,4 +1,8 @@
 export default defineAppConfig({
+  mastNav: {
+    links: [] as Array<{ id: string; label: string; to: string | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> } }>,
+    scrollBehaviour: 'router' as 'smooth-scroll' | 'router',
+  },
   uiLayer: {
     gradients: {
       brand: { shape: 'linear', direction: 'to-br', from: { color: 'primary', shade: 500 }, to: { color: 'secondary', shade: 600 } },
@@ -35,6 +39,10 @@ export default defineAppConfig({
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
+    mastNav?: {
+      links?: Array<{ id: string; label: string; to: string | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> } }>
+      scrollBehaviour?: 'smooth-scroll' | 'router'
+    }
     uiLayer?: {
       name?: string
       gradients?: Record<string, import('./types/gradient').GradientConfig>

package/layers/ui/app/components/Base/Modal.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+/**
+ * BaseModal — overlay-compatible modal shell.
+ *
+ * Use this as a starting point for new modals:
+ *   1. Copy or extend this component
+ *   2. Add your props and content in the slots
+ *   3. Register with createModal() in a composable
+ *
+ * Example:
+ *   // components/ConfirmModal.vue
+ *   <BaseModal title="Are you sure?" @confirm="..." />
+ *
+ *   // composables/confirmModal.ts
+ *   export const useConfirmModal = createModal(ConfirmModal)
+ */
+const { open = false, title, description, size = 'md' } = defineProps<{
+  open?: boolean
+  title?: string
+  description?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'close': []
+}>()
+
+const sizeClass: Record<string, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  full: 'max-w-full',
+}
+
+function dismiss() {
+  emit('update:open', false)
+  emit('close')
+}
+</script>
+
+<template>
+  <Transition name="base-modal">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4"
+      @click.self="dismiss"
+    >
+      <!-- Backdrop -->
+      <div class="bg-(--ui-bg-muted) absolute inset-0 opacity-60" @click="dismiss" />
+
+      <!-- Panel -->
+      <div
+        class="bg-(--ui-bg) ring-(--ui-border) relative w-full rounded-2xl shadow-xl ring-1"
+        :class="sizeClass[size]"
+      >
+        <!-- Header -->
+        <div v-if="title || $slots.header" class="border-(--ui-border) flex items-start justify-between border-b px-6 py-4">
+          <slot name="header">
+            <div>
+              <p class="text-(--ui-text) text-base font-semibold">
+                {{ title }}
+              </p>
+              <p v-if="description" class="text-(--ui-text-muted) mt-0.5 text-sm">
+                {{ description }}
+              </p>
+            </div>
+          </slot>
+          <button
+            class="text-(--ui-text-muted) hover:text-(--ui-text) ml-4 cursor-pointer border-0 bg-transparent p-1 transition-colors"
+            aria-label="Close"
+            @click="dismiss"
+          >
+            <UIcon name="lucide:x" class="size-5" />
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="px-6 py-5">
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="border-(--ui-border) flex justify-end gap-3 border-t px-6 py-4">
+          <slot name="footer" :dismiss="dismiss" />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.base-modal-enter-active,
+.base-modal-leave-active {
+  transition: opacity 200ms ease;
+}
+.base-modal-enter-from,
+.base-modal-leave-to {
+  opacity: 0;
+}
+.base-modal-enter-active .bg-\(--ui-bg\),
+.base-modal-leave-active .bg-\(--ui-bg\) {
+  transition: opacity 200ms ease, transform 200ms ease;
+}
+.base-modal-enter-from .bg-\(--ui-bg\),
+.base-modal-leave-to .bg-\(--ui-bg\) {
+  opacity: 0;
+  transform: scale(0.96) translateY(4px);
+}
+</style>

package/layers/ui/app/components/Mast/Nav.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const { open } = useMastNav()
+const z = useGridConfig().useZIndex('dropdown')
+</script>
+
+<template>
+  <button
+    aria-label="Open navigation menu"
+    class="fixed right-0 top-0 flex cursor-pointer items-center justify-center border-0 bg-transparent p-4"
+    :style="{ zIndex: z }"
+    @click="open"
+  >
+    <slot name="icon">
+      <UIcon name="lucide:menu" class="size-7" />
+    </slot>
+  </button>
+</template>

package/layers/ui/app/components/Mast/NavModal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const { open } = defineProps<{ open?: boolean }>()
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'close': []
+}>()
+
+const { links, scrollBehaviour } = useAppConfig().mastNav
+const activeSection = useState<string>('activeSection', () => '')
+const route = useRoute()
+const { close: closeNav } = useMastNav()
+
+function dismiss() {
+  emit('update:open', false)
+  emit('close')
+  closeNav()
+}
+
+function handleNav(link: { id: string; to: string | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> } }) {
+  if (scrollBehaviour === 'smooth-scroll' && route.name === 'index') {
+    try { useSmoothScroll().scrollTo(`#${link.id}`) }
+    catch {}
+  }
+  else {
+    navigateTo(link.to)
+  }
+  dismiss()
+}
+</script>
+
+<template>
+  <Transition name="nav-modal">
+    <div
+      v-if="open"
+      class="bg-(--ui-bg) text-(--ui-text) fixed inset-0 flex flex-col items-center justify-center"
+      :style="{ zIndex: useGridConfig().useZIndex('modal') }"
+    >
+      <button
+        class="absolute right-[5vw] top-[3vh] cursor-pointer border-0 bg-transparent p-2"
+        aria-label="Close navigation"
+        @click="dismiss"
+      >
+        <UIcon name="lucide:x" class="size-7" />
+      </button>
+
+      <LinksGroup tag="nav" class="flex flex-col items-center gap-2">
+        <button
+          v-for="link in links"
+          :key="link.id"
+          class="cursor-pointer border-0 bg-transparent px-4 py-3 text-3xl uppercase tracking-widest transition-all"
+          :class="activeSection === link.id ? 'font-normal' : 'font-light'"
+          @click="handleNav(link)"
+        >
+          {{ link.label }}
+        </button>
+      </LinksGroup>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.nav-modal-enter-active,
+.nav-modal-leave-active {
+  transition: opacity 300ms ease;
+}
+.nav-modal-enter-from,
+.nav-modal-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,25 @@
+import { createSharedComposable } from '@vueuse/core'
+import MastNavModal from '../components/Mast/NavModal.vue'
+
+function _useMastNav() {
+  if (import.meta.server) return { open: () => {}, close: () => {} }
+
+  const overlay = useOverlay()
+  const modal = overlay.create(MastNavModal)
+
+  function open() {
+    try { useSmoothScroll().lockScrolling() }
+    catch {}
+    modal.open()
+  }
+
+  function close() {
+    modal.close()
+    try { useSmoothScroll().unlockScrolling() }
+    catch {}
+  }
+
+  return { open, close }
+}
+
+export const useMastNav = createSharedComposable(_useMastNav)

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

@@ -0,0 +1,22 @@
+type ToastOptions = {
+  description?: string
+  duration?: number
+}
+
+export function useAppToast() {
+  const toast = useToast()
+
+  return {
+    success: (title: string, opts?: ToastOptions) =>
+      toast.add({ title, icon: 'lucide:check-circle', color: 'success', ...opts }),
+
+    error: (title: string, opts?: ToastOptions) =>
+      toast.add({ title, icon: 'lucide:x-circle', color: 'error', ...opts }),
+
+    info: (title: string, opts?: ToastOptions) =>
+      toast.add({ title, icon: 'lucide:info', color: 'info', ...opts }),
+
+    warning: (title: string, opts?: ToastOptions) =>
+      toast.add({ title, icon: 'lucide:triangle-alert', color: 'warning', ...opts }),
+  }
+}

package/layers/ui/app/layouts/default.vue

@@ -8,14 +8,11 @@ const hasMastHeader = typeof mastHeader !== 'string'
 const hasMastFooter = typeof mastFooter !== 'string'
 </script>
 
-<!-- eslint-disable vue/no-multiple-template-root -->
 <template>
-  <MastScroller>
-    <component :is="mastHeader" v-if="hasMastHeader" />
-    <MastMain>
-      <slot />
-    </MastMain>
-    <component :is="mastFooter" v-if="hasMastFooter" />
-    <LayoutGridDebug />
-  </MastScroller>
+  <component :is="mastHeader" v-if="hasMastHeader" />
+  <MastMain>
+    <slot />
+  </MastMain>
+  <component :is="mastFooter" v-if="hasMastFooter" />
+  <UOverlayProvider />
 </template>

package/layers/ui/app/utils/createModal.ts

@@ -0,0 +1,34 @@
+import { createSharedComposable } from '@vueuse/core'
+import type { Component } from 'vue'
+
+/**
+ * Factory that turns any overlay-compatible component into a shared modal composable.
+ *
+ * Usage:
+ *   // composables/myModal.ts
+ *   import MyModal from '../components/MyModal.vue'
+ *   export const useMyModal = createModal(MyModal)
+ *
+ *   // anywhere in the app
+ *   const { open, close, patch } = useMyModal()
+ *   open({ title: 'Hello' })
+ *
+ * The returned composable is wrapped with createSharedComposable so overlay.create()
+ * is only called once regardless of how many components call it.
+ *
+ * The modal component must accept `open: boolean` and emit `update:open` + `close`.
+ * Extend BaseModal.vue as a starting point.
+ */
+export function createModal<P extends Record<string, unknown>>(component: Component) {
+  return createSharedComposable(() => {
+    if (import.meta.server) return { open: () => {}, close: () => {}, patch: () => {} }
+
+    const overlay = useOverlay()
+    const modal = overlay.create<P>(component)
+    return {
+      open: (props?: Partial<P>) => modal.open(props),
+      close: () => modal.close(),
+      patch: (props: Partial<P>) => modal.patch(props),
+    }
+  })
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",
@@ -35,7 +35,7 @@
     "better-sqlite3": "^12.6.2",
     "gsap": "^3.14.2",
     "locomotive-scroll": "^5.0.1",
-    "nuxt": "^4.3.1",
+    "nuxt": "^4.4.2",
     "nuxt-studio": "^1.4.0",
     "pinia": "^3.0.4",
     "tailwindcss": "^4.2.1",