kmcom-nuxt-layers 1.6.0 → 1.6.1

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

@@ -1,5 +1,17 @@
+<script setup lang="ts">
+const { open } = useMastNav()
+const z = useGridConfig().useZIndex('dropdown')
+</script>
+
 <template>
-  <nav>
-    <slot />
-  </nav>
+  <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

@@ -14,4 +14,5 @@ const hasMastFooter = typeof mastFooter !== 'string'
     <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.6.0",
+  "version": "1.6.1",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",