npm - kmcom-nuxt-layers - Versions diffs - 1.7.3 → 1.7.4 - Mend

kmcom-nuxt-layers 1.7.3 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/layers/content/app/components/Gallery/ImagePage.vue ADDED Viewed

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
+const { slug, index } = defineProps<{
+  slug: string
+  index: number
+}>()
+</script>
+<template>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryImageDetail :slug :index />
+    </LayoutGridItem>
+  </LayoutSection>
+</template>

package/layers/content/app/{pages/gallery/index.vue → components/Gallery/Page.vue} RENAMED Viewed

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
-  useSeoMeta({
-    title: 'Gallery',
-    description: 'Photo collections and visual work',
-  })
+useSeoMeta({
+  title: 'Gallery',
+  description: 'Photo collections and visual work',
+})
 </script>
 <template>

package/layers/content/app/components/Gallery/SlugPage.vue ADDED Viewed

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { contentLayer } = useAppConfig()
+if (contentLayer?.sections?.gallery === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Not Found' })
+}
+const { slug } = defineProps<{
+  slug: string
+}>()
+</script>
+<template>
+  <LayoutSection>
+    <LayoutGridItem>
+      <GalleryDetail :slug />
+    </LayoutGridItem>
+  </LayoutSection>
+</template>

package/layers/core/app/{pages/diagnostics.vue → components/DiagnosticsPage.vue} RENAMED Viewed

@@ -28,13 +28,11 @@ useSeoMeta({
   <div class="min-h-screen p-8">
     <UContainer>
       <div class="space-y-8">
-        <!-- Header -->
         <div class="text-center">
           <h1 class="text-4xl font-bold mb-2">Core Layer Diagnostics</h1>
           <p class="text-gray-500 dark:text-gray-400">Feature detection and system information</p>
         </div>
-        <!-- CSS Features -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">CSS Features</h2>
@@ -73,7 +71,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- Image Formats -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Image Formats</h2>
@@ -92,7 +89,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- JavaScript APIs -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">JavaScript APIs</h2>
@@ -121,7 +117,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- Device Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Device Information</h2>
@@ -136,7 +131,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- Network Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Network Information</h2>
@@ -177,7 +171,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- Rendering Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">Rendering Information</h2>
@@ -200,7 +193,6 @@ useSeoMeta({
           </div>
         </UCard>
-        <!-- PWA Info -->
         <UCard>
           <template #header>
             <h2 class="text-xl font-semibold">PWA Information</h2>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -140,7 +140,7 @@
     "eslint-plugin-prettier": "^5.5.6",
     "eslint-plugin-unicorn": "^64.0.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "eslint-plugin-vue": "^10.9.1",
+    "eslint-plugin-vue": "^10.9.2",
     "netlify-cli": "^26.1.0",
     "npm-check-updates": "^22.2.1",
     "nuxt": "^4.4.7",

package/layers/content/app/pages/gallery/[slug]/[imageId].vue DELETED Viewed

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
-  const route = useRoute()
-  const slug = route.params.slug as string
-  const index = Number(route.params.imageId)
-</script>
-<template>
-  <LayoutSection>
-    <LayoutGridItem>
-      <GalleryImageDetail :slug="slug" :index="index" />
-    </LayoutGridItem>
-  </LayoutSection>
-</template>

package/layers/content/app/pages/gallery/[slug]/index.vue DELETED Viewed

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-  const { contentLayer } = useAppConfig()
-  if (contentLayer?.sections?.gallery === false) {
-    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
-  }
-  const route = useRoute()
-  const slug = route.params.slug as string
-</script>
-<template>
-  <LayoutSection>
-    <LayoutGridItem>
-      <GalleryDetail :slug="slug" />
-    </LayoutGridItem>
-  </LayoutSection>
-</template>

package/layers/ui/app/pages/index.vue DELETED Viewed

@@ -1,236 +0,0 @@
-<script setup lang="ts">
-const umainRef = ref()
-</script>
-<template>
-  <MastMain :umain="umainRef">
-    <UContainer class="py-12 space-y-12">
-      <!-- Header Section -->
-      <div class="space-y-4">
-        <SiteTitle site-title="UI Layer" tag="h1" title-variant="default" />
-        <Typography
-          tag="p"
-          weight="font-normal"
-          leading="leading-relaxed"
-          color="muted"
-          class="text-lg"
-        >
-          A unified, typed design system for Nuxt applications. This layer provides typography,
-          colors, media handling, and reusable UI primitives.
-        </Typography>
-      </div>
-      <!-- Typography Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted">
-          Typography Components
-        </TypographyHeadline>
-        <div class="space-y-4">
-          <div class="space-y-2">
-            <TypographyHeadline :level="1"> Headline Level 1 </TypographyHeadline>
-            <TypographyHeadline :level="2"> Headline Level 2 </TypographyHeadline>
-            <TypographyHeadline :level="3"> Headline Level 3 </TypographyHeadline>
-            <TypographyHeadline :level="4"> Headline Level 4 </TypographyHeadline>
-          </div>
-          <Typography tag="p" leading="leading-relaxed">
-            The Typography component provides full control over font weight, width, slant, leading,
-            tracking, alignment, and text transformation through typed props.
-          </Typography>
-          <TypographyCodeBlock language="typescript" color="muted">
-            &lt;Typography weight="font-bold" leading="leading-tight" tracking="tracking-tight" &gt;
-            Fully typed typography &lt;/Typography&gt;</TypographyCodeBlock
-          >
-        </div>
-      </section>
-      <!-- Color System Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Color System </TypographyHeadline>
-        <div class="space-y-4">
-          <div>
-            <Typography tag="h3" weight="font-semibold" class="mb-2"> Semantic Colors </Typography>
-            <div class="flex flex-wrap gap-2">
-              <Typography
-                color="dimmed"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Dimmed
-              </Typography>
-              <Typography
-                color="muted"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Muted
-              </Typography>
-              <Typography
-                color="toned"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Toned
-              </Typography>
-              <Typography
-                color="highlighted"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Highlighted
-              </Typography>
-            </div>
-          </div>
-          <div>
-            <Typography tag="h3" weight="font-semibold" class="mb-2"> Status Colors </Typography>
-            <div class="flex flex-wrap gap-2">
-              <Typography color="info" class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded">
-                Info
-              </Typography>
-              <Typography
-                color="success"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Success
-              </Typography>
-              <Typography
-                color="warning"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Warning
-              </Typography>
-              <Typography
-                color="error"
-                class="px-3 py-2 bg-neutral-100 dark:bg-neutral-800 rounded"
-              >
-                Error
-              </Typography>
-            </div>
-          </div>
-        </div>
-      </section>
-      <!-- Components Section -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted">
-          Available Components
-        </TypographyHeadline>
-        <div class="grid md:grid-cols-2 gap-6">
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Typography </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Base component with full control over font properties
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Typography (base)</li>
-                <li>Headline (h1-h6)</li>
-                <li>CodeBlock</li>
-                <li>QuoteBlock</li>
-              </ul>
-            </div>
-          </UCard>
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Links </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Type-safe navigation with named routes
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Named route enforcement</li>
-                <li>Color support</li>
-                <li>ULink wrapper</li>
-              </ul>
-            </div>
-          </UCard>
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Media </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Responsive image handling with optimization
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Picture component</li>
-                <li>Multiple formats (avif, webp)</li>
-                <li>Responsive sizing</li>
-                <li>Lazy loading</li>
-              </ul>
-            </div>
-          </UCard>
-          <UCard>
-            <template #header>
-              <TypographyHeadline :level="3"> Branding </TypographyHeadline>
-            </template>
-            <div class="space-y-2">
-              <Typography tag="p" color="muted" leading="leading-relaxed">
-                Site branding and structure components
-              </Typography>
-              <ul class="list-disc list-inside space-y-1 text-sm text-muted">
-                <li>Masthead/Main wrapper</li>
-                <li>Site Title with variants</li>
-                <li>Semantic HTML structure</li>
-              </ul>
-            </div>
-          </UCard>
-        </div>
-      </section>
-      <!-- Quote Example -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Quote Block </TypographyHeadline>
-        <TypographyQuoteBlock color="muted" class="border-l-4 border-primary pl-4 italic">
-          A unified, typed design system that provides consistency across projects while maintaining
-          flexibility for customization.
-        </TypographyQuoteBlock>
-      </section>
-      <!-- Features List -->
-      <section class="space-y-6">
-        <TypographyHeadline :level="2" color="highlighted"> Key Features </TypographyHeadline>
-        <div class="grid md:grid-cols-3 gap-4">
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Fully Typed </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Complete TypeScript coverage with semantic types for typography, colors, and
-              breakpoints
-            </Typography>
-          </div>
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Composable First </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Built on Vue composables (useTypography, useColor, usePicture) for maximum reusability
-            </Typography>
-          </div>
-          <div class="space-y-2">
-            <Typography weight="font-semibold" color="primary"> Responsive Ready </Typography>
-            <Typography tag="p" color="muted" leading="leading-relaxed" class="text-sm">
-              Comprehensive breakpoint system supporting Tailwind, device, phone, and tablet
-              breakpoints
-            </Typography>
-          </div>
-        </div>
-      </section>
-      <!-- Footer -->
-      <footer class="pt-8 border-t border-neutral-200 dark:border-neutral-800">
-        <Typography tag="p" color="dimmed" align="center" class="text-sm">
-          UI Layer - A reusable design system for Nuxt
-        </Typography>
-      </footer>
-    </UContainer>
-  </MastMain>
-</template>