kmcom-nuxt-layers 1.7.9 → 2.2.0

package/layers/forms/app/components/Form/Field.vue

@@ -1,96 +1,92 @@
 <!-- eslint-disable vue/require-default-prop -->
 <script setup lang="ts">
-import { fieldConfigs, type FieldType } from '../../config/fields'
-import type { FieldSize } from '../../types/fields'
+  import { fieldConfigs, type FieldType } from '../../config/fields'
+  import type { FieldSize } from '../../types/fields'
 
-const {
-  type = 'text',
-  name,
-  label,
-  required = false,
-  size = 'md',
-  placeholder,
-  icon,
-  class: className,
-} = defineProps<{
-  /** Field type determines validation, icon, and input behavior */
-  type?: FieldType
-  /** Field name for form binding */
-  name: string
-  /** Label text displayed above the field */
-  label?: string
-  /** Whether the field is required */
-  required?: boolean
-  /** Field size (xs, sm, md, lg, xl) */
-  size?: FieldSize
-  /** Override default placeholder */
-  placeholder?: string
-  /** Override default icon */
-  icon?: string
-  /** Additional CSS classes */
-  class?: string
-}>()
+  const {
+    type = 'text',
+    name,
+    label,
+    required = false,
+    size = 'md',
+    placeholder,
+    icon,
+    class: className,
+  } = defineProps<{
+    /** Field type determines validation, icon, and input behavior */
+    type?: FieldType
+    /** Field name for form binding */
+    name: string
+    /** Label text displayed above the field */
+    label?: string
+    /** Whether the field is required */
+    required?: boolean
+    /** Field size (xs, sm, md, lg, xl) */
+    size?: FieldSize
+    /** Override default placeholder */
+    placeholder?: string
+    /** Override default icon */
+    icon?: string
+    /** Additional CSS classes */
+    class?: string
+  }>()
 
-const model = defineModel<string | number>()
+  const model = defineModel<string | number>()
 
-const config = computed(() => fieldConfigs[type])
+  const config = computed(() => fieldConfigs[type])
 
-const resolvedPlaceholder = computed(() => placeholder ?? config.value.placeholder)
-const resolvedIcon = computed(() => icon ?? config.value.icon)
+  const resolvedPlaceholder = computed(() => placeholder ?? config.value.placeholder)
+  const resolvedIcon = computed(() => icon ?? config.value.icon)
 
-const isTextarea = computed(() => config.value.component === 'UTextarea')
-const isNumber = computed(() => config.value.component === 'UInputNumber')
+  const isTextarea = computed(() => config.value.component === 'UTextarea')
+  const isNumber = computed(() => config.value.component === 'UInputNumber')
 
-const formFieldProps = computed(() => ({
-  name,
-  required,
-  size,
-  ...(label !== undefined && { label }),
-  ...(className !== undefined && { class: className }),
-}))
+  const formFieldProps = computed(() => ({
+    name,
+    required,
+    size,
+    ...(label !== undefined && { label }),
+    ...(className !== undefined && { class: className }),
+  }))
 
-const baseInputProps = computed(() => ({
-  size,
-  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
-  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
-}))
+  const baseInputProps = computed(() => ({
+    size,
+    ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+    ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+  }))
 
-const numberInputProps = computed(() => ({
-  size,
-  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
-  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
-  ...(currencyOptions.value !== undefined && { formatOptions: currencyOptions.value }),
-}))
+  const numberInputProps = computed(() => ({
+    size,
+    ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+    ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+    ...(currencyOptions.value !== undefined && { formatOptions: currencyOptions.value }),
+  }))
 
-const textInputProps = computed(() => ({
-  type: config.value.inputType,
-  size,
-  ...(config.value.inputMode !== undefined && { inputmode: config.value.inputMode }),
-  ...(config.value.autocomplete !== undefined && { autocomplete: config.value.autocomplete }),
-  ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
-  ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
-}))
+  const textInputProps = computed(() => ({
+    type: config.value.inputType,
+    size,
+    ...(config.value.inputMode !== undefined && { inputmode: config.value.inputMode }),
+    ...(config.value.autocomplete !== undefined && { autocomplete: config.value.autocomplete }),
+    ...(resolvedPlaceholder.value !== undefined && { placeholder: resolvedPlaceholder.value }),
+    ...(resolvedIcon.value !== undefined && { leadingIcon: resolvedIcon.value }),
+  }))
 
-const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
-  if (config.value.format === 'currency') {
-    return {
-      style: 'currency' as const,
-      currency: 'USD',
+  const currencyOptions = computed((): Intl.NumberFormatOptions | undefined => {
+    if (config.value.format === 'currency') {
+      return {
+        style: 'currency' as const,
+        currency: 'USD',
+      }
     }
-  }
-  return undefined
-})
+    return undefined
+  })
 </script>
 
 <template>
   <UFormField v-bind="formFieldProps">
     <UTextarea v-if="isTextarea" v-model="model as string" autoresize v-bind="baseInputProps" />
 
-    <UInputNumber
-      v-else-if="isNumber"
-      v-model="model as number"
-      v-bind="numberInputProps"
-    />
+    <UInputNumber v-else-if="isNumber" v-model="model as number" v-bind="numberInputProps" />
 
     <UInput v-else v-model="model as string" v-bind="textInputProps" />
   </UFormField>

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

@@ -1,4 +1,6 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions */
 import { z, type ZodObject, type ZodRawShape, type ZodTypeAny } from 'zod'
+
 import { fieldConfigs, type FieldType } from '../config/fields'
 
 /**

package/layers/forms/app/config/fields.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod'
+
 import type { FieldConfig } from '../types/fields'
 
 /**

package/layers/forms/app/types/app-config.d.ts

@@ -1,5 +1,5 @@
 declare module '@nuxt/schema' {
-  interface AppConfigInput {
+  type AppConfigInput = {
     formsLayer?: {
       name?: string
     }

package/layers/forms/app/types/fields.ts

@@ -18,7 +18,7 @@ export type FieldFormat = 'currency'
 /**
  * Configuration for a field type
  */
-export interface FieldConfig {
+export type FieldConfig = {
   /** Icon to display in the input (Lucide icon class) */
   icon?: string
   /** HTML input type attribute */

package/layers/forms/nuxt.config.ts

@@ -4,22 +4,17 @@ export default defineNuxtConfig({
     name: 'forms',
   },
 
+  extends: ['../mailer'],
+
   alias: {
     '#layers/forms': import.meta.dirname,
+    '#layers/forms/types': `${import.meta.dirname}/app/types`,
   },
 
   compatibilityDate: '2026-01-24',
 
-  runtimeConfig: {
-    formsLayer: {
-      resendApiKey: '', // env: NUXT_FORMS_LAYER_RESEND_API_KEY
-      emailFrom: 'contact@example.com', // env: NUXT_FORMS_LAYER_EMAIL_FROM
-      emailTo: '', // env: NUXT_FORMS_LAYER_EMAIL_TO
-    },
-  },
-
   typescript: {
-    typeCheck: true,
+    typeCheck: false,
     strict: true,
   },
 })

package/layers/forms/package.json

@@ -4,16 +4,11 @@
   "type": "module",
   "main": "./nuxt.config.ts",
   "scripts": {
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
-    "dev": "nuxi dev .playground",
-    "dev:prepare": "nuxt prepare .playground",
-    "build": "nuxt build .playground",
-    "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground"
+    "dev": "nuxi dev",
+    "dev:playground": "PLAYGROUND_LAYERS=core,mailer,forms pnpm -F playground dev",
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
   },
   "dependencies": {
-    "hookable": "^5.5.3",
-    "resend": "^4.0.0",
-    "zod": "^4.4.3"
+    "zod": "catalog:conflicts_conflicts_zod_h4_3_6_h4_4_3"
   }
 }

package/layers/layout/app/assets/css/layout/grids.css

@@ -35,11 +35,11 @@
   grid-template-columns: repeat(var(--grid-cols), 1fr);
   grid-auto-rows: var(--grid-row-height);
   gap: var(--grid-gap);
+  box-sizing: border-box;
   padding-inline: var(--grid-padding); /* Outer gutters on left/right */
-  overflow-x: clip; /* clip without creating a scroll container (overflow-x:hidden would force overflow-y:auto) */
   width: 100%;
   max-width: 100%;
-  box-sizing: border-box;
+  overflow-x: clip; /* clip without creating a scroll container (overflow-x:hidden would force overflow-y:auto) */
 
   /* On mobile, allow rows to grow with content */
   @media (width < 48rem) {
@@ -64,23 +64,23 @@
  * Spans 12 rows (1 viewport height).
  */
 .basesection {
-  container-type: inline-size;
-  container-name: section;
-  grid-column: 1 / -1;
-  grid-row: span var(--grid-rows-per-section, 12);
   display: grid;
-  grid-template-columns: subgrid;
   grid-template-rows: subgrid;
-  scroll-snap-align: start;
-  max-width: 100%;
-  width: 100%;
+  grid-template-columns: subgrid;
+  grid-row: span var(--grid-rows-per-section, 12);
+  grid-column: 1 / -1;
   box-sizing: border-box;
+  container-name: section;
+  container-type: inline-size;
+  width: 100%;
+  max-width: 100%;
+  scroll-snap-align: start;
 
   /* Ensure all direct children respect container width */
   & > * {
-    max-width: 100%;
-    min-width: 0;
     box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
     overflow-wrap: break-word;
     word-wrap: break-word;
   }

package/layers/layout/app/assets/css/layout/modes/fluid.css

@@ -72,29 +72,29 @@
  * width and centres it within its parent.
  */
 .layout-container-content {
-  max-width: 65ch;
-  width: 100%;
-  margin-inline: auto;
   box-sizing: border-box;
+  margin-inline: auto;
+  width: 100%;
+  max-width: 65ch;
 }
 
 .layout-container-wide {
-  max-width: 90rem;
-  width: 100%;
-  margin-inline: auto;
   box-sizing: border-box;
+  margin-inline: auto;
+  width: 100%;
+  max-width: 90rem;
 }
 
 .layout-container-fluid {
-  max-width: 100%;
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
 }
 
 .layout-container-full {
+  box-sizing: border-box;
+  margin-inline: calc(var(--grid-padding, clamp(1rem, 2.5vw, 2rem)) * -1);
   /* Escape parent padding to reach the viewport edge */
   width: 100vw;
   max-width: 100vw;
-  margin-inline: calc(var(--grid-padding, clamp(1rem, 2.5vw, 2rem)) * -1);
-  box-sizing: border-box;
 }

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

@@ -1,42 +1,42 @@
 <script setup lang="ts">
-/**
- * LayoutContainer — constrained content width wrapper.
- *
- * Provides four standard container widths that sit within the grid:
- *
- * | size    | max-width | use case                        |
- * |---------|-----------|----------------------------------|
- * | content | 65ch      | Long-form prose, articles        |
- * | wide    | 90rem     | Cards, media-rich sections       |
- * | fluid   | 100%      | Full bleed within grid padding   |
- * | full    | 100vw     | True full-bleed (escapes padding)|
- *
- * The container is centred with `margin-inline: auto` for `content` and `wide`.
- *
- * @prop {GridContainerSize} size — Container width variant (default: 'wide')
- * @prop {string}            tag  — HTML element to render (default: 'div')
- *
- * @example
- * <LayoutContainer size="content">
- *   <p>Readable prose constrained to ~65 characters wide.</p>
- * </LayoutContainer>
- */
+  /**
+   * LayoutContainer — constrained content width wrapper.
+   *
+   * Provides four standard container widths that sit within the grid:
+   *
+   * | size    | max-width | use case                        |
+   * |---------|-----------|----------------------------------|
+   * | content | 65ch      | Long-form prose, articles        |
+   * | wide    | 90rem     | Cards, media-rich sections       |
+   * | fluid   | 100%      | Full bleed within grid padding   |
+   * | full    | 100vw     | True full-bleed (escapes padding)|
+   *
+   * The container is centred with `margin-inline: auto` for `content` and `wide`.
+   *
+   * @prop {GridContainerSize} size — Container width variant (default: 'wide')
+   * @prop {string}            tag  — HTML element to render (default: 'div')
+   *
+   * @example
+   * <LayoutContainer size="content">
+   *   <p>Readable prose constrained to ~65 characters wide.</p>
+   * </LayoutContainer>
+   */
 
-import type { GridContainerSize } from '#layers/layout/app/types/layouts'
+  import type { GridContainerSize } from '#layers/layout/app/types/layouts'
 
-interface Props {
-  size?: GridContainerSize
-  tag?: string
-}
+  interface Props {
+    size?: GridContainerSize
+    tag?: string
+  }
 
-const { size = 'wide', tag = 'div' } = defineProps<Props>()
+  const { size = 'wide', tag = 'div' } = defineProps<Props>()
 
-const sizeClass: Record<GridContainerSize, string> = {
-  content: 'layout-container-content',
-  wide: 'layout-container-wide',
-  fluid: 'layout-container-fluid',
-  full: 'layout-container-full',
-}
+  const sizeClass: Record<GridContainerSize, string> = {
+    content: 'layout-container-content',
+    wide: 'layout-container-wide',
+    fluid: 'layout-container-fluid',
+    full: 'layout-container-full',
+  }
 </script>
 
 <template>

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

@@ -1,71 +1,71 @@
 <script setup lang="ts">
-/**
- * GridDebug - Visual grid overlay
- *
- * Displays a semi-transparent overlay showing grid columns.
- * Toggle visibility with Ctrl+G (Windows/Linux) or Cmd+G (Mac).
- * Automatically adapts to responsive grid density (6/12/18 columns).
- *
- * @prop {string} gap - Gap between columns (default: clamp(0.75rem, 1.5vw, 1.5rem))
- * @prop {string} color - Column overlay color (default: rgba(255, 0, 0, 0.1))
- *
- * @example
- * <GridDebug color="rgba(0, 100, 255, 0.15)" />
- */
+  /**
+   * GridDebug - Visual grid overlay
+   *
+   * Displays a semi-transparent overlay showing grid columns.
+   * Toggle visibility with Ctrl+G (Windows/Linux) or Cmd+G (Mac).
+   * Automatically adapts to responsive grid density (6/12/18 columns).
+   *
+   * @prop {string} gap - Gap between columns (default: clamp(0.75rem, 1.5vw, 1.5rem))
+   * @prop {string} color - Column overlay color (default: rgba(255, 0, 0, 0.1))
+   *
+   * @example
+   * <GridDebug color="rgba(0, 100, 255, 0.15)" />
+   */
 
-interface Props {
-  gap?: string
-  color?: string
-}
+  interface Props {
+    gap?: string
+    color?: string
+  }
 
-const { gap = 'clamp(0.75rem, 1.5vw, 1.5rem)', color = 'rgba(255, 0, 0, 0.1)' } =
-  defineProps<Props>()
+  const { gap = 'clamp(0.75rem, 1.5vw, 1.5rem)', color = 'rgba(255, 0, 0, 0.1)' } =
+    defineProps<Props>()
 
-const visible = ref(false)
+  const visible = ref(false)
 
-const toggle = () => {
-  visible.value = !visible.value
-}
+  const toggle = () => {
+    visible.value = !visible.value
+  }
 
-const handleKeydown = (event: KeyboardEvent) => {
-  if ((event.ctrlKey || event.metaKey) && event.key === 'g') {
-    event.preventDefault()
-    toggle()
+  const handleKeydown = (event: KeyboardEvent) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'g') {
+      event.preventDefault()
+      toggle()
+    }
   }
-}
 
-// Track column count in JS so v-for renders the correct number of divs.
-// Mirrors the same breakpoints as mastmain (48rem = 768px, 80rem = 1280px).
-const cols = ref(6)
+  // Track column count in JS so v-for renders the correct number of divs.
+  // Mirrors the same breakpoints as mastmain (48rem = 768px, 80rem = 1280px).
+  const cols = ref(6)
 
-const updateCols = () => {
-  if (window.matchMedia('(min-width: 80rem)').matches) cols.value = 18
-  else if (window.matchMedia('(min-width: 48rem)').matches) cols.value = 12
-  else cols.value = 6
-}
+  const updateCols = () => {
+    if (window.matchMedia('(min-width: 80rem)').matches) cols.value = 18
+    else if (window.matchMedia('(min-width: 48rem)').matches) cols.value = 12
+    else cols.value = 6
+  }
 
-onMounted(() => {
-  updateCols()
-  window.addEventListener('resize', updateCols)
-  window.addEventListener('keydown', handleKeydown)
-})
+  onMounted(() => {
+    updateCols()
+    window.addEventListener('resize', updateCols)
+    window.addEventListener('keydown', handleKeydown)
+  })
 
-onUnmounted(() => {
-  window.removeEventListener('resize', updateCols)
-  window.removeEventListener('keydown', handleKeydown)
-})
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateCols)
+    window.removeEventListener('keydown', handleKeydown)
+  })
 
-// Do NOT set --grid-cols here as an inline style — that would override the
-// CSS media queries in <style scoped> below. Let CSS own the variable.
-const style = computed(() => ({
-  display: 'grid',
-  gridTemplateColumns: `repeat(${cols.value}, 1fr)`,
-  gap,
-  paddingInline: 'clamp(1rem, 2.5vw, 2rem)',
-  pointerEvents: 'none' as const,
-}))
+  // Do NOT set --grid-cols here as an inline style — that would override the
+  // CSS media queries in <style scoped> below. Let CSS own the variable.
+  const style = computed(() => ({
+    display: 'grid',
+    gridTemplateColumns: `repeat(${cols.value}, 1fr)`,
+    gap,
+    paddingInline: 'clamp(1rem, 2.5vw, 2rem)',
+    pointerEvents: 'none' as const,
+  }))
 
-defineExpose({ toggle })
+  defineExpose({ toggle })
 </script>
 
 <template>