kmcom-nuxt-layers 1.6.20 → 1.6.21

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

@@ -1,18 +1,44 @@
-export default {
+type MastNavLink = {
+  id: string
+  label: string
+  to:
+    | string
+    | {
+        name: string
+        params?: Record<string, string | number>
+        query?: Record<string, string | number>
+      }
+}
+
+export default defineAppConfig({
   site: {
     title: '',
     subtitle: '',
     description: '',
   },
   mastNav: {
-    links: [],
+    links: [] as MastNavLink[],
     scrollBehaviour: 'router',
   },
   uiLayer: {
     gradients: {
-      brand: { shape: 'linear', direction: 'to-br', from: { color: 'primary', shade: 500 }, to: { color: 'secondary', shade: 600 } },
-      subtle: { shape: 'linear', direction: 'to-b', from: { color: 'primary', shade: 100, opacity: 50 }, to: { color: 'transparent' } },
-      hero: { shape: 'radial', from: { color: 'primary', shade: 400, opacity: 40 }, to: { color: 'transparent' } },
+      brand: {
+        shape: 'linear',
+        direction: 'to-br',
+        from: { color: 'primary', shade: 500 },
+        to: { color: 'secondary', shade: 600 },
+      },
+      subtle: {
+        shape: 'linear',
+        direction: 'to-b',
+        from: { color: 'primary', shade: 100, opacity: 50 },
+        to: { color: 'transparent' },
+      },
+      hero: {
+        shape: 'radial',
+        from: { color: 'primary', shade: 400, opacity: 40 },
+        to: { color: 'transparent' },
+      },
     },
     accentScenes: {
       hero: {
@@ -40,4 +66,4 @@ export default {
       },
     },
   },
-}
+})

package/layers/ui/app/components/Accent/Scene.vue

@@ -30,19 +30,19 @@ const resolvedBlobs = computed((): BlobConfig[] => {
   <component :is="tag" class="relative overflow-clip isolate">
     <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
       <AccentBlob
-      v-for="(blob, i) in resolvedBlobs"
-      :key="i"
-      :x="blob.x"
-      :y="blob.y"
-      v-bind="{
-        ...(blob.size !== undefined && { size: blob.size }),
-        ...(blob.blur !== undefined && { blur: blob.blur }),
-        ...(blob.opacity !== undefined && { opacity: blob.opacity }),
-        ...(blob.color !== undefined && { color: blob.color }),
-        ...(blob.shade !== undefined && { shade: blob.shade }),
-        ...(blob.customColor !== undefined && { customColor: blob.customColor }),
-      }"
-    />
+        v-for="(blob, i) in resolvedBlobs"
+        :key="i"
+        :x="blob.x"
+        :y="blob.y"
+        v-bind="{
+          ...(blob.size !== undefined && { size: blob.size }),
+          ...(blob.blur !== undefined && { blur: blob.blur }),
+          ...(blob.opacity !== undefined && { opacity: blob.opacity }),
+          ...(blob.color !== undefined && { color: blob.color }),
+          ...(blob.shade !== undefined && { shade: blob.shade }),
+          ...(blob.customColor !== undefined && { customColor: blob.customColor }),
+        }"
+      />
     </div>
     <div class="relative z-10">
       <slot />

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

@@ -5,7 +5,8 @@ const emit = defineEmits<{
   'close': []
 }>()
 
-const { links, scrollBehaviour } = useAppConfig().mastNav
+type NavLink = { id: string; label: string; to: string | { name: string; params?: Record<string, string | number>; query?: Record<string, string | number> } }
+const { links, scrollBehaviour } = useAppConfig().mastNav as { links: NavLink[]; scrollBehaviour: string }
 const activeSection = useState<string>('activeSection', () => '')
 const route = useRoute()
 const { close: closeNav } = useMastNav()
@@ -16,7 +17,7 @@ function dismiss() {
   closeNav()
 }
 
-function handleNav(link: { id: string; to: string | { name: string; params?: Record<string, unknown>; query?: Record<string, unknown> } }) {
+function handleNav(link: NavLink) {
   if (scrollBehaviour === 'smooth-scroll' && route.name === 'index') {
     try { useSmoothScroll().scrollTo(`#${link.id}`) }
     catch {}

package/layers/ui/app/components/Progress/Bar.vue

@@ -21,7 +21,7 @@ const modelValue = computed(() => (progress != null ? progress * 100 : undefined
 
 const progressProps = computed(() => ({
   ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
-  ...(color !== undefined && { color }),
+  ...(color !== undefined && { color: color as 'primary' | 'neutral' }),
   ...(size !== undefined && { size }),
   ...(orientation !== undefined && { orientation }),
   ...(status !== undefined && { status }),

package/layers/ui/app/components/Typography/TextStroke.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { usePreferredContrast } from '@vueuse/core'
-
 const id = useId()
 const contrast = usePreferredContrast()
 

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

@@ -60,7 +60,7 @@ export function useGradient(
 
     let resolved: GradientConfig
     if (typeof raw === 'string') {
-      const preset = (appConfig.uiLayer as Record<string, unknown> | undefined)?.gradients as
+      const preset = (appConfig.uiLayer as Record<string, unknown> | undefined)?.['gradients'] as
         | Record<string, GradientConfig>
         | undefined
       resolved = preset?.[raw] ?? DEFAULT_CONFIG

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

@@ -1,4 +1,3 @@
-import { createSharedComposable } from '@vueuse/core'
 import MastNavModal from '../components/Mast/NavModal.vue'
 
 function _useMastNav() {

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

@@ -8,15 +8,15 @@ export function useAppToast() {
 
   return {
     success: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:check-circle', color: 'success', ...opts }),
+      toast.add({ title, icon: 'lucide:check-circle', color: 'success' as 'primary', ...opts }),
 
     error: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:x-circle', color: 'error', ...opts }),
+      toast.add({ title, icon: 'lucide:x-circle', color: 'error' as 'primary', ...opts }),
 
     info: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:info', color: 'info', ...opts }),
+      toast.add({ title, icon: 'lucide:info', color: 'info' as 'primary', ...opts }),
 
     warning: (title: string, opts?: ToastOptions) =>
-      toast.add({ title, icon: 'lucide:triangle-alert', color: 'warning', ...opts }),
+      toast.add({ title, icon: 'lucide:triangle-alert', color: 'warning' as 'primary', ...opts }),
   }
 }

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

@@ -1,4 +1,3 @@
-import { createSharedComposable } from '@vueuse/core'
 import type { Component } from 'vue'
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.6.20",
+  "version": "1.6.21",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "files": [
     "layers/*/nuxt.config.ts",