kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,75 +1,78 @@
+<!-- eslint-disable vue/no-boolean-default vue/no-duplicate-attr-inheritance -->
+<!-- eslint-disable vue/no-duplicate-attr-inheritance -->
+<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-/**
- * PageContainer - Unified page wrapper component
- *
- * Integrates with the Swiss Grid System and optionally supports UPage layout.
- * Manages page metadata via useHead() and provides title redundancy.
- *
- * @prop {string} title - Page title (required) - sets <title> and displays in header
- * @prop {string} description - Optional meta description for SEO
- * @prop {boolean} showHeader - Show visible page header (default: true)
- * @prop {string} headerPreset - Grid preset for header: 'hero', 'centered', 'fullWidth' (default: 'centered')
- * @prop {string} layout - Layout mode: 'grid' | 'upage' (default: 'grid')
- *
- * @example
- * <!-- Simple centered page -->
- * <PageContainer title="About" description="Learn about our company">
- *   <LayoutSection>
- *     <LayoutGridItem preset="centered">
- *       <p>Content here</p>
- *     </LayoutGridItem>
- *   </LayoutSection>
- * </PageContainer>
- *
- * @example
- * <!-- Hero page with custom grid (no visible header) -->
- * <PageContainer title="Welcome" :show-header="false" description="Welcome page">
- *   <LayoutSectionHero full-height>
- *     <h1>{{ title }}</h1>
- *   </LayoutSectionHero>
- * </PageContainer>
- *
- * @example
- * <!-- Documentation-style with UPage -->
- * <PageContainer title="Documentation" layout="upage">
- *   <UPageBody>
- *     <p>Documentation content</p>
- *   </UPageBody>
- * </PageContainer>
- */
+  /**
+   * PageContainer - Unified page wrapper component
+   *
+   * Integrates with the Swiss Grid System and optionally supports UPage layout.
+   * Manages page metadata via useHead() and provides title redundancy.
+   *
+   * @prop {string} title - Page title (required) - sets <title> and displays in header
+   * @prop {string} description - Optional meta description for SEO
+   * @prop {boolean} showHeader - Show visible page header (default: true)
+   * @prop {string} headerPreset - Grid preset for header: 'hero', 'centered', 'fullWidth' (default: 'centered')
+   * @prop {string} layout - Layout mode: 'grid' | 'upage' (default: 'grid')
+   *
+   * @example
+   * <!-- Simple centered page -->
+   * <PageContainer title="About" description="Learn about our company">
+   *   <LayoutSection>
+   *     <LayoutGridItem preset="centered">
+   *       <p>Content here</p>
+   *     </LayoutGridItem>
+   *   </LayoutSection>
+   * </PageContainer>
+   *
+   * @example
+   * <!-- Hero page with custom grid (no visible header) -->
+   * <PageContainer title="Welcome" :show-header="false" description="Welcome page">
+   *   <LayoutSectionHero full-height>
+   *     <h1>{{ title }}</h1>
+   *   </LayoutSectionHero>
+   * </PageContainer>
+   *
+   * @example
+   * <!-- Documentation-style with UPage -->
+   * <PageContainer title="Documentation" layout="upage">
+   *   <UPageBody>
+   *     <p>Documentation content</p>
+   *   </UPageBody>
+   * </PageContainer>
+   */
 
-interface Props {
-  title: string
-  description?: string
-  showHeader?: boolean
-  headerPreset?: string
-  layout?: 'grid' | 'upage'
-  back?: string
-}
+  interface Props {
+    title: string
+    description?: string
+    showHeader?: boolean
+    headerPreset?: string
+    layout?: 'grid' | 'upage'
+    back?: string
+  }
 
-const {
-  title,
-  description,
-  showHeader = true,
-  headerPreset = 'centered',
-  layout = 'grid',
-  back,
-} = defineProps<Props>()
+  const {
+    title,
+    description,
+    showHeader = true,
+    headerPreset = 'centered',
+    layout = 'grid',
+    back,
+  } = defineProps<Props>()
 
-// Set page metadata for SEO and browser tab
-useHead({
-  title,
-  meta: description
-    ? [
-        { name: 'description', content: description },
-        { property: 'og:title', content: title },
-        { property: 'og:description', content: description },
-      ]
-    : undefined,
-})
+  // Set page metadata for SEO and browser tab
+  useHead({
+    title,
+    meta: description
+      ? [
+          { name: 'description', content: description },
+          { property: 'og:title', content: title },
+          { property: 'og:description', content: description },
+        ]
+      : undefined,
+  })
 
-// Provide title to child components (e.g., for breadcrumbs, schema.org)
-provide('pageTitle', title)
+  // Provide title to child components (e.g., for breadcrumbs, schema.org)
+  provide('pageTitle', title)
 </script>
 
 <template>
@@ -95,6 +98,7 @@ provide('pageTitle', title)
   <!-- UPage Layout Mode - needs wrapper with MastMain -->
   <div v-else>
     <MastMain>
+      <!-- eslint-disable-next-line vue/no-duplicate-attr-inheritance -->
       <UPage v-bind="$attrs">
         <slot />
       </UPage>

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

@@ -1,27 +1,28 @@
+<!-- eslint-disable vue/define-props-destructuring -->
 <script setup lang="ts">
-/**
- * PageHeader - Standard page header component
- *
- * Displays a centered page title and optional description with consistent spacing.
- * Used by PageContainer for visible page headers.
- *
- * @prop {string} title - Page title (displays as h1)
- * @prop {string} description - Optional page description
- *
- * @example
- * <LayoutPageHeader
- *   title="About Us"
- *   description="Learn about our company and mission"
- * />
- */
+  /**
+   * PageHeader - Standard page header component
+   *
+   * Displays a centered page title and optional description with consistent spacing.
+   * Used by PageContainer for visible page headers.
+   *
+   * @prop {string} title - Page title (displays as h1)
+   * @prop {string} description - Optional page description
+   *
+   * @example
+   * <LayoutPageHeader
+   *   title="About Us"
+   *   description="Learn about our company and mission"
+   * />
+   */
 
-interface Props {
-  title: string
-  description?: string
-  back?: string
-}
+  interface Props {
+    title: string
+    description?: string
+    back?: string
+  }
 
-defineProps<Props>()
+  defineProps<Props>()
 </script>
 
 <template>

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
   /**
    * LayoutPage — canonical page wrapper for the Swiss Grid System.

package/layers/layout/app/components/Layout/Section/Gallery.vue

@@ -1,57 +1,58 @@
+<!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts" generic="T">
-/**
- * SectionGallery - Auto-placing grid for collections
- *
- * Creates an evenly-distributed gallery layout with auto-placing grid items.
- * Items flow automatically based on the specified column count.
- *
- * @prop {T[]} items - Array of items to render (required)
- * @prop {2 | 3 | 4 | 6} columns - Number of columns (default: 3)
- * @prop {number} itemRowSpan - Rows per item (default: 4)
- * @prop {boolean} fullHeight - Force 100svh (default: false)
- *
- * @slot item - Template for each item
- *   @param {T} item - The current item
- *   @param {number} index - Item index
- *
- * @example
- * <SectionGallery :items="images" :columns="3" :item-row-span="4">
- *   <template #item="{ item, index }">
- *     <NuxtImg :src="item.src" class="size-full object-cover" />
- *   </template>
- * </SectionGallery>
- */
+  /**
+   * SectionGallery - Auto-placing grid for collections
+   *
+   * Creates an evenly-distributed gallery layout with auto-placing grid items.
+   * Items flow automatically based on the specified column count.
+   *
+   * @prop {T[]} items - Array of items to render (required)
+   * @prop {2 | 3 | 4 | 6} columns - Number of columns (default: 3)
+   * @prop {number} itemRowSpan - Rows per item (default: 4)
+   * @prop {boolean} fullHeight - Force 100svh (default: false)
+   *
+   * @slot item - Template for each item
+   *   @param {T} item - The current item
+   *   @param {number} index - Item index
+   *
+   * @example
+   * <SectionGallery :items="images" :columns="3" :item-row-span="4">
+   *   <template #item="{ item, index }">
+   *     <NuxtImg :src="item.src" class="size-full object-cover" />
+   *   </template>
+   * </SectionGallery>
+   */
 
-interface Props<T> {
-  items?: T[]
-  columns?: 2 | 3 | 4 | 6
-  itemRowSpan?: number
-  fullHeight?: boolean
-}
+  interface Props<T> {
+    items?: T[]
+    columns?: 2 | 3 | 4 | 6
+    itemRowSpan?: number
+    fullHeight?: boolean
+  }
 
-const { items, columns = 3, itemRowSpan = 4, fullHeight = false } = defineProps<Props<T>>()
+  const { items, columns = 3, itemRowSpan = 4, fullHeight = false } = defineProps<Props<T>>()
 
-// Responsive column spans that work across 6/12/18 column grids
-const columnSpan = computed(() => {
-  // On mobile (6 cols): Always 1 column (full width)
-  // On tablet (12 cols): 2 columns max
-  // On desktop (18 cols): Use requested columns
+  // Responsive column spans that work across 6/12/18 column grids
+  const columnSpan = computed(() => {
+    // On mobile (6 cols): Always 1 column (full width)
+    // On tablet (12 cols): 2 columns max
+    // On desktop (18 cols): Use requested columns
 
-  if (columns === 2) {
-    return { default: 6, md: 6, lg: 9 } // 1 col mobile, 2 cols tablet, 2 cols desktop
-  }
-  if (columns === 3) {
-    return { default: 6, md: 6, lg: 6 } // 1 col mobile, 2 cols tablet, 3 cols desktop
-  }
-  if (columns === 4) {
-    return { default: 6, md: 6, lg: 4 } // 1 col mobile, 2 cols tablet, 4-5 cols desktop
-  }
-  if (columns === 6) {
-    return { default: 6, md: 4, lg: 3 } // 1 col mobile, 3 cols tablet, 6 cols desktop
-  }
+    if (columns === 2) {
+      return { default: 6, md: 6, lg: 9 } // 1 col mobile, 2 cols tablet, 2 cols desktop
+    }
+    if (columns === 3) {
+      return { default: 6, md: 6, lg: 6 } // 1 col mobile, 2 cols tablet, 3 cols desktop
+    }
+    if (columns === 4) {
+      return { default: 6, md: 6, lg: 4 } // 1 col mobile, 2 cols tablet, 4-5 cols desktop
+    }
+    if (columns === 6) {
+      return { default: 6, md: 4, lg: 3 } // 1 col mobile, 3 cols tablet, 6 cols desktop
+    }
 
-  return { default: 6, md: 6, lg: 6 }
-})
+    return { default: 6, md: 6, lg: 6 }
+  })
 </script>
 
 <template>

package/layers/layout/app/components/Layout/Section/Grid.vue

@@ -1,29 +1,29 @@
 <script setup lang="ts">
-/**
- * LayoutSectionGrid — RAM (Repeat Auto Minmax) pattern
- *
- * Auto-wrapping grid that fits as many columns as possible at `minItemWidth`
- * without media queries. Uses `repeat(auto-fit, minmax(..., 1fr))`.
- *
- * @prop {string} minItemWidth - Minimum column width before wrapping (default: '200px')
- * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
- *
- * @slot default - Grid items
- *
- * @example
- * <LayoutSectionGrid min-item-width="250px">
- *   <div>Card 1</div>
- *   <div>Card 2</div>
- *   <div>Card 3</div>
- * </LayoutSectionGrid>
- */
+  /**
+   * LayoutSectionGrid — RAM (Repeat Auto Minmax) pattern
+   *
+   * Auto-wrapping grid that fits as many columns as possible at `minItemWidth`
+   * without media queries. Uses `repeat(auto-fit, minmax(..., 1fr))`.
+   *
+   * @prop {string} minItemWidth - Minimum column width before wrapping (default: '200px')
+   * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
+   *
+   * @slot default - Grid items
+   *
+   * @example
+   * <LayoutSectionGrid min-item-width="250px">
+   *   <div>Card 1</div>
+   *   <div>Card 2</div>
+   *   <div>Card 3</div>
+   * </LayoutSectionGrid>
+   */
 
-interface Props {
-  minItemWidth?: string
-  fullHeight?: boolean
-}
+  interface Props {
+    minItemWidth?: string
+    fullHeight?: boolean
+  }
 
-const { minItemWidth = '200px', fullHeight = false } = defineProps<Props>()
+  const { minItemWidth = '200px', fullHeight = false } = defineProps<Props>()
 </script>
 
 <template>
@@ -37,10 +37,10 @@ const { minItemWidth = '200px', fullHeight = false } = defineProps<Props>()
 </template>
 
 <style scoped>
-.ram-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width, 200px), 1fr));
-  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
-  width: 100%;
-}
+  .ram-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width, 200px), 1fr));
+    gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+    width: 100%;
+  }
 </style>

package/layers/layout/app/components/Layout/Section/Hero.vue

@@ -1,35 +1,37 @@
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-/**
- * SectionHero - Full-viewport hero section
- *
- * Pre-configured hero layout with optional background and footer slots.
- * Main content is vertically and horizontally centered.
- *
- * @prop {boolean} fullHeight - Force 100svh (default: true)
- *
- * @slot background - Full-bleed background layer (z-index: 0)
- * @slot default - Main centered content (z-index: 10)
- * @slot footer - Bottom-aligned content (z-index: 10)
- *
- * @example
- * <SectionHero>
- *   <template #background>
- *     <NuxtImg src="/hero.jpg" class="size-full object-cover" />
- *   </template>
- *   <h1>Main Heading</h1>
- *   <p>Subtitle</p>
- *   <template #footer>
- *     <UButton>CTA</UButton>
- *   </template>
- * </SectionHero>
- */
+  // @ts-nocheck
+  /**
+   * SectionHero - Full-viewport hero section
+   *
+   * Pre-configured hero layout with optional background and footer slots.
+   * Main content is vertically and horizontally centered.
+   *
+   * @prop {boolean} fullHeight - Force 100svh (default: true)
+   *
+   * @slot background - Full-bleed background layer (z-index: 0)
+   * @slot default - Main centered content (z-index: 10)
+   * @slot footer - Bottom-aligned content (z-index: 10)
+   *
+   * @example
+   * <SectionHero>
+   *   <template #background>
+   *     <NuxtImg src="/hero.jpg" class="size-full object-cover" />
+   *   </template>
+   *   <h1>Main Heading</h1>
+   *   <p>Subtitle</p>
+   *   <template #footer>
+   *     <UButton>CTA</UButton>
+   *   </template>
+   * </SectionHero>
+   */
 
-interface Props {
-  fullHeight?: boolean
-}
+  interface Props {
+    fullHeight?: boolean
+  }
 
-const { fullHeight = true } = defineProps<Props>()
+  const { fullHeight = true } = defineProps<Props>()
 </script>
 
 <template>

package/layers/layout/app/components/Layout/Section/Sidebar.vue

@@ -1,38 +1,38 @@
 <script setup lang="ts">
-/**
- * LayoutSectionSidebar — Sidebar Says layout
- *
- * Two-column layout where the sidebar takes a clamped width and main content
- * fills the rest. Uses `minmax(min, max) 1fr` (or reversed for right sidebar).
- *
- * @prop {string} sidebarMin - Minimum sidebar width (default: '150px')
- * @prop {string} sidebarMax - Maximum sidebar width (default: '25%')
- * @prop {boolean} reverse - Put sidebar on the right (default: false)
- * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
- *
- * @slot sidebar - Sidebar content
- * @slot default - Main content (fills remaining space)
- *
- * @example
- * <LayoutSectionSidebar sidebar-max="20rem">
- *   <template #sidebar><nav>...</nav></template>
- *   <article>Main content</article>
- * </LayoutSectionSidebar>
- */
+  /**
+   * LayoutSectionSidebar — Sidebar Says layout
+   *
+   * Two-column layout where the sidebar takes a clamped width and main content
+   * fills the rest. Uses `minmax(min, max) 1fr` (or reversed for right sidebar).
+   *
+   * @prop {string} sidebarMin - Minimum sidebar width (default: '150px')
+   * @prop {string} sidebarMax - Maximum sidebar width (default: '25%')
+   * @prop {boolean} reverse - Put sidebar on the right (default: false)
+   * @prop {boolean} fullHeight - Force 100svh on the section (default: false)
+   *
+   * @slot sidebar - Sidebar content
+   * @slot default - Main content (fills remaining space)
+   *
+   * @example
+   * <LayoutSectionSidebar sidebar-max="20rem">
+   *   <template #sidebar><nav>...</nav></template>
+   *   <article>Main content</article>
+   * </LayoutSectionSidebar>
+   */
 
-interface Props {
-  sidebarMin?: string
-  sidebarMax?: string
-  reverse?: boolean
-  fullHeight?: boolean
-}
+  interface Props {
+    sidebarMin?: string
+    sidebarMax?: string
+    reverse?: boolean
+    fullHeight?: boolean
+  }
 
-const {
-  sidebarMin = '150px',
-  sidebarMax = '25%',
-  reverse = false,
-  fullHeight = false,
-} = defineProps<Props>()
+  const {
+    sidebarMin = '150px',
+    sidebarMax = '25%',
+    reverse = false,
+    fullHeight = false,
+  } = defineProps<Props>()
 </script>
 
 <template>
@@ -55,23 +55,23 @@ const {
 </template>
 
 <style scoped>
-.sidebar-inner {
-  display: grid;
-  grid-template-columns: minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%)) 1fr;
-  gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
-  width: 100%;
-  height: 100%;
-}
+  .sidebar-inner {
+    display: grid;
+    grid-template-columns: minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%)) 1fr;
+    gap: var(--grid-gap, clamp(0.75rem, 1.5vw, 1.5rem));
+    width: 100%;
+    height: 100%;
+  }
 
-.sidebar-inner.sidebar-reverse {
-  grid-template-columns: 1fr minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%));
-}
+  .sidebar-inner.sidebar-reverse {
+    grid-template-columns: 1fr minmax(var(--sidebar-min, 150px), var(--sidebar-max, 25%));
+  }
 
-.sidebar-inner.sidebar-reverse .sidebar-aside {
-  order: 2;
-}
+  .sidebar-inner.sidebar-reverse .sidebar-aside {
+    order: 2;
+  }
 
-.sidebar-inner.sidebar-reverse .sidebar-main {
-  order: 1;
-}
+  .sidebar-inner.sidebar-reverse .sidebar-main {
+    order: 1;
+  }
 </style>

package/layers/layout/app/components/Layout/Section/Split.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
-/**
- * SectionSplit - Two-column layout section
- *
- * Creates a balanced two-column layout with optional column reversal on mobile.
- * Each column spans 9 columns (half of 18-column grid).
- *
- * @prop {boolean} fullHeight - Force 100svh (default: false)
- * @prop {boolean} reverse - Swap column order on mobile (default: false)
- *
- * @slot left - Left column content (stacks first on mobile unless reverse=true)
- * @slot right - Right column content (stacks second on mobile unless reverse=true)
- *
- * @example
- * <SectionSplit reverse>
- *   <template #left>
- *     <NuxtImg src="/image.jpg" class="size-full object-cover" />
- *   </template>
- *   <template #right>
- *     <h2>Content</h2>
- *     <p>Description...</p>
- *   </template>
- * </SectionSplit>
- */
+  /**
+   * SectionSplit - Two-column layout section
+   *
+   * Creates a balanced two-column layout with optional column reversal on mobile.
+   * Each column spans 9 columns (half of 18-column grid).
+   *
+   * @prop {boolean} fullHeight - Force 100svh (default: false)
+   * @prop {boolean} reverse - Swap column order on mobile (default: false)
+   *
+   * @slot left - Left column content (stacks first on mobile unless reverse=true)
+   * @slot right - Right column content (stacks second on mobile unless reverse=true)
+   *
+   * @example
+   * <SectionSplit reverse>
+   *   <template #left>
+   *     <NuxtImg src="/image.jpg" class="size-full object-cover" />
+   *   </template>
+   *   <template #right>
+   *     <h2>Content</h2>
+   *     <p>Description...</p>
+   *   </template>
+   * </SectionSplit>
+   */
 
-interface Props {
-  fullHeight?: boolean
-  reverse?: boolean
-}
+  interface Props {
+    fullHeight?: boolean
+    reverse?: boolean
+  }
 
-const { fullHeight = false, reverse = false } = defineProps<Props>()
+  const { fullHeight = false, reverse = false } = defineProps<Props>()
 </script>
 
 <template>